vue入门：属性绑定与事件绑定
简介
vue中的html元素的属性和事件是支持通过变量方式动态修改，和原始js的dom操作有一些区别。这里总结一下vue的属性绑定与事件绑定的方法，以及与原生js的对比。
属性绑定
属性绑定指的是将html元素的一个属性值设置成变量。
原生的html中，比如，这里的type的值就是text。
在vue中，我们可以把text设置成一个变量:input_type。
可以写成，这里就实现了一个vue的属性绑定，type的值会随着input_type变化而变化。
属性绑定语法
属性绑定有两种写法
- :attr="var"
- v-bind:attr="var"
上面的例子里面写的是，对应了第一种写法；也可以写成。项目一般采用第一种缩写方式。
对比原生js
如果使用原生js去操作dom元素的属性的话，一般是先获取到input元素，然后通过js的属性设置方法去修改这个input元素。
事件绑定
和属性绑定类似，html元素中的事件也可以绑定到一个特定的变量，比如。
这里click方法就绑定到了changeType函数，点击这个button，就会调用changeType函数。
事件绑定也有两种写法
- @event="eventhandler(param..)"
- v-on:event="eventhandler(param..)"
event代表某个事件，如click。eventhandler指的是处理函数，其中可以传入变量（一个或多个），记住属性绑定的函数里面必须有()，不能只是一个函数名。
对应的是第一种写法。
也可以写成
对比原生js
如果使用原生js去绑定事件的话，可以对元素设置事件监听和事件绑定。
#js事件绑定方式，只能给button绑定一个事件
document.getElementById("testBtn").onclick = changeType;#js事件监听方式，可以给button绑定多个事件
document.getElementById("testBtn").addEventListener("click",changeType);vue中的元素使用原生js事件监听，比如某个自定义的vue组件ms-nav，我要给这个组件绑定一个click事件，正常情况下是不生效的。
#这里应该加上.native注明监听的是原生js的事件
实际例子
vue属性绑定和事件绑定的代码片段
export default {data() {return {input_type : 'text'}},methods:{changeType() {this.input_type = "radio"}} }
传送门：2021最新测试资料与大厂招聘合集
博主：测试生财（一个不为996而996的测开码农）
座右铭：专注测试开发与自动化运维，努力读书思考写作，为内卷的人生奠定财务自由。
内容范畴：技术提升，职场杂谈，事业发展，阅读写作，投资理财，健康人生。
csdn：https://blog.csdn.net/ccgshigao
博客园：https://www.cnblogs.com/qa-freeroad/
51cto：https://blog.51cto.com/14900374
微信公众号：测试生财（定期分享独家内容和资源）
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！