vue入门:属性绑定与事件绑定 | 您所在的位置:网站首页 › 数据绑定的作用 › 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 微信公众号:测试生财(定期分享独家内容和资源) |
CopyRight 2018-2019 实验室设备网 版权所有 |