时间戳

首页 > 解决方案 > Vuejs 导入/加载 javascript 文件

javascript - 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>

标签： javascriptvue.js

解决方案

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

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

只需将您的复选框状态绑定到 Vuedata属性并使用它来确定密码字段type，例如

<input :type="passwordFieldType" class="form-control"
       id="password" v-model="password"
       placeholder="Password">

<!-- snip -->

<input v-model="passwordFieldType" true-value="text" false-value="password"
       class="form-check-input" type="checkbox"
       id="showPassword">

data: () => ({
  passwordFieldType: 'password'
})

见https://vuejs.org/v2/guide/forms.html#Checkbox-1

new Vue({
  el: '#app',
  data: () => ({
    password: '',
    passwordFieldType: 'password'
  })
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<form class="col-md-12 col-sm-12" id="app">
  <div class="form-group">
    <label for="password">Password</label>
    <input :type="passwordFieldType" class="form-control" id="password" v-model="password" placeholder="Password">
  </div>
  <div class="form-group pl-0">
    <div class="form-check">
      <input v-model="passwordFieldType" true-value="text" false-value="password"
             class="form-check-input" type="checkbox" id="showPassword" />
      <label class="form-check-label" for="show-password">Show Password</label>
    </div>
  </div>
  <br>
</form>

推荐阅读