如何使用Vue.js中的按钮点击事件并获取按钮属性_IT百科

第一步，在HBuilder工具中已创建好的Web项目，指定目录下新建静态页面buttonClick.html，如下图所示：

如何使用Vue.js中的按钮点击事件并获取按钮属性

第二步，在title标签下引入vue.js核心JavaScript文件，注意压缩版本和开发版本，如下图所示：

如何使用Vue.js中的按钮点击事件并获取按钮属性

第三步，在<body></body>标签内，插入一个div和四个button，使用v-on绑定事件，如下图所示：

如何使用Vue.js中的按钮点击事件并获取按钮属性

第四步，在<div></div>标签下方，插入<script></script>标签，并在标签内编写事件函数，如下图所示：

如何使用Vue.js中的按钮点击事件并获取按钮属性

第五步，保存代码并在浏览器中查看结果，点击按钮，查看d出的结果，如下图所示：

如何使用Vue.js中的按钮点击事件并获取按钮属性

第六步，d出的结果为undefined，修改代码并在事件中传参数，然后再次查看结果，可以看到按钮的相关属性和方法（浏览器控制台），如下图所示：

如何使用Vue.js中的按钮点击事件并获取按钮属性

1、新建一个html页面，然后在这个代码页面上创建一个div标签id为app，然后在这个div标签里创建一个按钮标签和一个用于显示隐藏的div标签。

2、引入vue.js。在body结束标签前面使用<sctipt>引入vue.js文件。

3、为vue创建挂载点。在vue.js引入文件后面新建一个<sctipt>标签，然后创建vue的挂载点。

4、使用data创建show属性，默认值为true；使用metheds创建一个点击事件（showCont），该事件处理当show值为true就修改给false，当show为false就修改为true。

5、添加显示隐藏功能。在按钮标签上添加点击事件showCont，在按钮标签后的div标签上使用v-if添加show属性。

6、保存html代码，然后使用浏览器打开，点击按钮会发现按钮后面的文字隐藏了，再次点击按钮隐藏的内容又显示出来。

用v-directive自定义指令自定义一个v-permission来根据后端返回的数据进行按钮的显示隐藏从而达到按钮权限控制

Vue.directive('permission', function(el,binding,vnode){

console.log(el)

console.log(binding)

console.log(vnode)

el.style.display=binding.value === 'btn1'?"none":"block"

})

el : 指令所绑定的元素，可以用来直接 *** 作 DOM 。

binding : 一个对象，包含以下属性：

name : 指令名，不包括 v- 前缀。

value : 指令的绑定值，例如： v-my-directive="1 + 1", value 的值是 2。

oldValue : 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。

expression : 绑定值的表达式或变量名。例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。

arg : 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。

modifiers : 一个包含修饰符的对象。例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。

vnode : Vue 编译生成的虚拟节点。

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

如何使用Vue.js中的按钮点击事件并获取按钮属性