标签：事件监听器 表单 开发 nbsp input fun spl 显示 判断
条件与循环
v-if判断使用 ：控制元素是否显示
<div id="app-3"> <p v-if="seen">vue是否显示</p> </div>
var app3 = new Vue({
el: ‘#app-3‘,
data: {
seen: true
}
})
v-for循环使用：
<div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text}} </li> </ol> </div>
var app4 = new Vue({
el: ‘#app-4‘,
data:{
todos: [
{ text: ‘学习javascript‘},
{ text: ‘学习vue‘},
{ text: ‘开发项目‘}
]
}
})
处理用户输入
v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：
<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!!!‘
},
methods:{
reverseMessage: function(){
this.message = this.message.split(‘‘).reverse().join(‘‘)
}
}
})
v-model指令，它能轻松实现表单输入和应用状态之间的双向绑定。
<div id="app-6"> <p>{{ message }}</p> <input v-model="message"> </div>
var app6 = new Vue({
el: ‘#app-6‘,
data: {
message: ‘Hello Vue!-6‘
}
})
标签：事件监听器 表单 开发 nbsp input fun spl 显示 判断
原文地址：https://www.cnblogs.com/zxh06820/p/13526586.html
