vue初学3之vue指令②
4.v-for指令
作用:根据一组数组的选项列表进行渲染
语法:( value , key ) in item
exp:
<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: '整个牛项目' } ] } })
exp效果:
6.v-on作用:数据双向绑定,只能用在input、select、textarea这些表单元素
语法:v-model=表达式
exp:
<div id="app-5"> <p>{{ message }}</p> <input v-model="message"> </div>
var app5 = new Vue({ el: '#app-5', data: { message: 'Hello Vue!' } })
exp效果:输入框输入什么文字,p标签中出现相同的文字
作用:用监听DOM事件触发代码
语法:v-on:eventName="eventHandle"
指令简写:@
事件处理函数:写在methods中统一管理
事件对象:在事件处理函数中获取;内联事件处理函数执行;传入事件对象
事件修饰符:事件处理函数只有纯粹的逻辑判断,不处理DOM事件细节,例如阻止冒泡,取消默认行为,判断按键
exp:
<div id="app-6"> <p>{{ message }}</p> <button v-on:click="reverseMessage">逆转消息</button> </div>
var app6 = new Vue({ el: '#app-6', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } })
exp效果:点击逆转信息按钮,句子字母会倒序排列