「vue干货1」循环,计算属性,事件处理器!
2020-11-19 11:32:27来源:阅读:-
Vue干货第一集:
v-for 循环
- v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。
- v-for 可以绑定数据到数组来渲染一个列表:
循环 - {{value}}
- 模板中使用 v-for:
{{ site.name }} --------------
- v-for 可以通过一个对象的属性来迭代数据:
- v-for 也可以循环整数
{{ n }}
computed 计算属性
原始字符串: {{ message }}
计算后反转字符串: {{ reversedMessage }}
实例中声明了一个计算属性 reversedMessage 。
提供的函数将用作属性 vm.reversedMessage 的 getter 。
vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。
事件处理器
- 事件监听可以用v-on指令:
- 我们需要使用一个方法来调用 JavaScript 方法,v-on 可以接收一个定义的方法来调用
methods: { greet: function (event) { // `this` 在方法里指当前 Vue 实例 alert('Hello ' + this.name + '!') // `event` 是原生 DOM 事件 if (event) { alert(event.target.tagName) } } }
- 除了直接绑定到一个方法,也可以用内联 JavaScript 语句:
methods: { say: function (message) { alert(message) } }
推荐阅读:财经快讯
版权和免责申明
第一女人所有文字、图片、视频、音频等资料均来自互联网,不代表本站赞同其观点,本站亦不为其版权负责。相关作品的原创性、文中陈述文字以及内容数据庞杂本站无法一一核实,如果您发现本网站上有侵犯您的合法权益的内容,请联系我们,本网站将立即予以删除!
