vue判断是否禁用按钮_IT百科

1、打开html开发工具，新建一个html 代码页面。

2、在新建的html代码页面创建一个<ul>标签同时给这个标签设置一个id为app，然后在<ul>里创建一个<li>标签。

3、引入vue.js。在<body>结束标签前面引入下载好的vue.js文件。

4、创建vue实例。在引入的vue.js文件后面新建一个<script>标签，然后在这个标签里使用new Vue()创建vue实例，并设置一个数组为 sites。

5、使用v-for循环。在<li>标签上添加 v-for="site in sites"，然后使用{{site.name}}进行遍历数组的打印。

6、保存html代码后使用浏览器打开，即可看到浏览器页面上打印出用户名，表示vue的循环遍历已经使用成功。

在写项目的时候，由于save和update方法使用了同一个界面，在保存的时候下拉框可选，在修改的时候下拉框不可选

实现方法 v-bind:disabled="dataForm.trainName!=0"

在main.js中写入

然后再需要用到的页面直接使用

这里有一个小问题：

原理是在点击的时候，给自身加一个disabled禁止点击, 两秒后disabled取消，

但是这个指令方法，在div上面没有生效，所以需要用button按钮

Vue.directive('preventReClick', {

inserted (el, binding) {

el.addEventListener('click', () =>{

if(!el.disabled) {

el.disabled =true setTimeout(() =>{

el.disabled =false }, binding.value || 3000)

}

})

}

})

借鉴于 https://www.cnblogs.com/adbg/p/11271237.html

欢迎分享，转载请注明来源：内存溢出

vue判断是否禁用按钮