v-bind 绑定属性
将这个元素节点的 title 属性和 Vue 实例的 message 属性保持一致”。
v-if 条件判断
v-for 遍历元素
v-for="todo in books"
v-on 交互的事件监听
<button v-on:click="reverseMessage">逆转消息</button>
var app5 = new Vue({
el: '#app-5', //元素选择器
data: {
message: 'Hello Vue.js!' //绑定的数据
},
methods: {
reverseMessage: function () { //监听回调函数
this.message = this.message.split('').reverse().join('')
}
}
})
v-model 双向绑定
<input v-model="message">
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
网友评论