-
vue单向数据绑定v-bind
- 单向数据绑定,内存数据的改变影响页面数据的改变
- v-bind就是对属性的简单赋值,当内存中值改变,会触发重新渲染,只能由js修改页面的值,页面的值修改后无法修改js中的值
- v-bind可以简写为 :
-
v-bind使用示例
<!DOCTYPE html> <html> <head> <title>v-bind指令-单向数据绑定</title> </head> <body> <div id="app"></div> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript"> new Vue({ el:'#app', template: ` <div> <input type="text" v-bind:value='name' :class='name'/> </div> `, data: function(){ return { name: 'hello' } } }) </script> </body> </html>
-
vue双向数据绑定v-model,只作用于有value属性的元素
- 双向数据绑定,页面对于input的value值的改变,能影响内存中name变量
- 内存js改变name的值,会影响页面重新渲染最新值
-
v-model使用示例
<!DOCTYPE html> <html> <head> <title>v-model指令-双向数据绑定</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id="app"></div> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript"> new Vue({ el:'#app', template: ` <div> <input type="text" :class='name' id='text2'><br> <input type="text" v-model='name' id='text1'><br> {{ name }} </div> `, //text2的class随着text1的值得改变在改变 data: function(){ return { name: 'hello' } } }) </script> </body> </html>
-
vue事件绑定v-on:事件名=“表达式 || 函数名”,简写@事件名=“表达式 || 函数名”
- 事件名可以是原生的也可以是自定义的
-
v-on使用示例
<!DOCTYPE html> <html> <head> <title>v-on指令-事件绑定</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id="app"></div> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript"> new Vue({ el:'#app', template: ` <div> {{ name }} <button v-on:click='name="改变name的值"'>点击我改变name</button><br> {{ name2 }} <button v-on:click='changeName'>点击我改变name</button> </div> `, data: function(){ return { name: 'hello', name2: 'hello2' } }, methods: { changeName: function(){ this.name2 = "通过方法改变了" } } }) </script> </body> </html>
vue事件绑定
最新推荐文章于 2024-04-19 18:32:11 发布