1、绑定数据
<span v-bind:title="message">/*v-bind可以去掉,直接:title="message",也可以绑定数据*/
鼠标悬停几秒钟查看此处动态绑定的提示信息!
</span>
2、条件
<p v-if="seen">现在你看到我了</p>
3、绑定数组的数据来渲染一个项目列表
<li v-for="todo in todos">
{{ todo.text }}
</li>
4、为了让用户和你的应用进行交互,我们可以用 v-on 指令添加一个事件监听器
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
5、Vue 还提供了 v-model 指令,它能轻松实现表单输入和应用状态之间的双向绑定。输入框输入的同时,p标签也会显示当前输入的值
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>