vue.js初学3之vue指令②
来源:互联网 发布:易语言2017盗号源码 编辑:程序博客网 时间:2024/05/23 02:03
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效果:点击逆转信息按钮,句子字母会倒序排列
阅读全文
0 0
- vue.js初学3之vue指令②
- vue.js初学2之vue指令①
- vue.js之自定义指令
- Vue.js指令篇之自定义指令
- 初学vue.js
- vue.js初学记录
- vue.js初学1
- Vue.js初学
- Vue.js 学习(6) -- Vue指令之:条件渲染
- Vue.js 学习(6) -- Vue指令之:列表渲染
- 09、vue.js 之自定义指令
- Vue.js--自定义指令
- vue.js部分指令
- Vue.js--自定义指令
- Vue.js基本指令
- Vue.js指令
- Vue.js 指令学习
- Vue.js 自定义指令
- LeetCode 2 Add Two Number
- java--charAt()
- META-INF文件夹是干啥的,META-INF文件夹的作用, META-INF文件夹能删吗
- HDU1789Doing Homework again
- PS(三)
- vue.js初学3之vue指令②
- OSPF笔记-8
- hadoop入门八(搭建环境)
- LaTeX公式语法1
- 在linux安装依赖于python包时,报错libpython.a: conld not read symbols
- java链表结构基本形式(学习笔记)
- 某些电脑下从注册表中获取的APPdata路径为空(来源于boost问题反馈)
- 【loli的胡策】Tourist Attractions(bitset)
- 机器学习名词