Vue中computed用法 computed比较适合对多个变量或者对象进行处理后返回一个结果值 计算属性 |
您所在的位置：网站首页 › kamawanai日语 › Vue中computed用法 computed比较适合对多个变量或者对象进行处理后返回一个结果值 计算属性 |
|
一、 computed是什么？
对于任何复杂逻辑，你都应当使用计算属性。
computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义. 然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理； computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化， 举例：总金额=价格*数量 当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。 所以，对于任何复杂逻辑，你都应当使用计算属性。 Original message: "{{ message }}" Computed reversed message: "{{ reversedMessage }}"var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // this 指向 vm 实例 return this.message.split('').reverse().join('') } } }) 123456789101112131415161718 二、 在Vue中有多种方法为视图设置值： 使用指令直接将数据值绑定到视图使用简单的表达式对内容进行简单的转换使用过滤器对内容进行简单的转换我们还可以使用计算属性根据数据模型中的值或一组值来计算显示值。计算属性允许我们对指定的视图，复杂的值计算。这些值将绑定到依赖项值，只在需要时更新。 1、计算属性 computed computed用来监控自己定义的变量，该变量不在data里面声明， 直接在computed里面定义，进行处理后返回一个结果值 Original message: "{{ message }}" Computed reversed message: "{{ reversedMessage }}"computed: { // 计算属性的 getter reversedMessage: function () { // this 指向 vm 实例 return this.message.split('').reverse().join('') } } 123456789101112 2、方法 methods 你我们也可以通过在表达式中调用方法来达到同样的效果： Original message: "{{ message }}" Reversed message: "{{ reversedMessage() }}" // 在组件中 methods: { reversedMessage: function () { return this.message.split('').reverse().join('') } } 12345678 3、侦听器 watch watch直接写一个监听处理函数，两个参数 当每次监听到 cityName 值发生改变时，执行函数。 new Vue({ el: '#root', data: { cityName: 'shanghai', name: '' }, watch: { cityName(newName, oldName) { this.name = newName } } }) 123456789101112 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |