Vuejs导入/加载javascript文件

我需要一些帮助。当我点击我的复选框显示或隐藏密码时，我试图加载我的javascript文件并在支票簿上更改列表。但由于某些原因，它不起作用。我什么都试过了，但不知如何解决这个问题

$(document).ready(function () {
 $('#showPassword').on('click', function () {
if ($(this).prop('checked')) {
  $('#password').attr('type', 'text')
} else {
  $('#password').attr('type', 'password')
}
})



<template>
<div class="container-fluid p-0">
<div class="col-md-12 content">
<div class="col-md-6 join-container" id="join-container">
  <form class="col-md-12 col-sm-12"
  >
    <div class="form-group">
      <label for="password">Password</label>
      <input type="password" class="form-control"
             id="password" v-model="password"
             placeholder="Password">
    </div>
    <div class="form-group pl-0">
      <div class="form-check">
       <input class="form-check-input" type="checkbox"
              id="showPassword" />
       <label class="form-check-label"
              for="show-password">Show Password</label>
      </div>
    </div>
    <br>
  </form>
</div>
</div>
</template>

<script>
import Main from '../script/Index.js'

export default {
  name: 'Register',
  data: () => ({

 }),
methods: {
},
components: {
 Main
}
}
</script>

$（文档）.ready（函数（）{
$（'showPassword'）。在（'click'，函数（）{
if（$（this.prop（'checked'））{
$（'#password'）.attr（'type'，'text'））
}否则{
$（'#password'）.attr（'type'，'password'））
}
})
密码
显示密码


从“../script/Index.js”导入Main
导出默认值{
名称：'注册'，
数据：（）=>({
}),
方法：{
},
组成部分：{
主要
}
}

不建议混合使用jQuery和Vue，因为它们有各自的生命周期

Vue能够自行完成您所追求的一切

只需将复选框状态绑定到Vue

数据

属性，并使用该属性确定密码字段的

类型

，例如

数据：（）=>({
passwordFieldType:“密码”
})

看

newvue({
el:“#应用程序”，
数据：（）=>({
密码：“”，
passwordFieldType:“密码”
})
})

密码
显示密码

不建议混合使用jQuery和Vue，因为它们有各自的生命周期

Vue能够自行完成您所追求的一切

只需将复选框状态绑定到Vue

数据

属性，并使用该属性确定密码字段的

类型

，例如

数据：（）=>({
passwordFieldType:“密码”
})

看

newvue({
el:“#应用程序”，
数据：（）=>({
密码：“”，
passwordFieldType:“密码”
})
})

密码
显示密码

您正在Vue组件文件中的脚本标记外部使用jQuery事件处理程序（

$

位）。我不希望该代码起任何作用

如果希望执行该代码，则需要将其放在组件中的

标记中。但是，Vue已经有事件侦听器（），包括侦听元素上的单击。无需使用两个框架

要实现粗略显示密码按钮（使用现有标记），我将这样做（删除额外标记以突出显示重要的Vue逻辑）：

导出默认值{
数据（）{
返回{
showPassword:false，
密码：“”
}
},
计算：{
密码类型（）{
如果（此.showPassword）{
返回“文本”
}否则{
返回“密码”
}
}
}
}

您正在Vue组件文件中的脚本标记外部使用jQuery事件处理程序（

$

位）。我不希望该代码起任何作用

如果希望执行该代码，则需要将其放在组件中的

标记中。但是，Vue已经有事件侦听器（），包括侦听元素上的单击。无需使用两个框架

要实现粗略显示密码按钮（使用现有标记），我将这样做（删除额外标记以突出显示重要的Vue逻辑）：

导出默认值{
数据（）{
返回{
showPassword:false，
密码：“”
}
},
计算：{
密码类型（）{
如果（此.showPassword）{
返回“文本”
}否则{
返回“密码”
}
}
}
}

我真的不建议混合使用jQuery和vue。jQuery不与vue代码混合。jQuery代码在我的Index.js文件中，我将该文件导入到我的vue中。我的意思是不要同时使用这两种代码；只使用vue真的不建议混合使用jQuery和vue。jQuery代码在我的Index.js文件中，我在我的vue中导入该文件。我的意思是不要同时使用这两个文件；只使用vue

<template>
<div>
  <input :type="passwordType" v-model="password">
  <input v-model="showPassword" type="checkbox"/>
</div>
</template>

<script>

export default {
  data() {
    return {
      showPassword: false,
      password: ''
    }
  },
  computed: {
    passwordType() {
      if (this.showPassword) {
        return 'text'
      } else {
        return 'password'
      }
    }
  }
}
</script>