computed

简介: computed

一、 computed是什么?

对于任何复杂逻辑,你都应当使用计算属性

computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义.

然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理;

computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化,

举例:总金额=价格*数量

当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理。

所以,对于任何复杂逻辑,你都应当使用计算属性。

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

二、 在Vue中有多种方法为视图设置值:

使用指令直接将数据值绑定到视图

使用简单的表达式对内容进行简单的转换

使用过滤器对内容进行简单的转换

我们还可以使用计算属性根据数据模型中的值或一组值来计算显示值。

计算属性允许我们对指定的视图,复杂的值计算。这些值将绑定到依赖项值,只在需要时更新。

1、计算属性 computed

computed用来监控自己定义的变量,该变量不在data里面声明,

直接在computed里面定义,进行处理后返回一个结果值

基础用法:

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }

使用computed计算属性传参:

<p v-for="(item, index) in 4" :key="index">
   <span>初始值:{{item}},</span>
   <span>{{item}}*2 = {{caculate(item)}}</span>
</p>
computed: {
  // 将每个传进来的值乘以2
   caculate () { //此处不需要携带参数
      return function (val) {
        return val*2
      }
    },
}

2、方法 methods

<p>Original message: "{{ message }}"</p>
<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

3、侦听器 watch

watch直接写一个监听处理函数,两个参数

当每次监听到 cityName 值发生改变时,执行函数

new Vue({
  el: '#root',
  data: {
    cityName: 'shanghai',
    name: ''
  },
  watch: {
    cityName(newName, oldName) {
      this.name = newName
    }
  } 
})


相关文章
|
6月前
|
缓存 JavaScript 容器
Vue之计算属性(computed)
Vue之计算属性(computed)
|
监控 JavaScript
computed的使用
一、 computed是什么? 对于任何复杂逻辑,你都应当使用计算属性。 computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义. 然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理;
|
3月前
|
缓存 JavaScript API
理解掌握 `watch`、`computed`、`watchEffect`
【8月更文挑战第5天】理解掌握 `watch`、`computed`、`watchEffect`
38 5
|
2月前
|
缓存
Vue3 的 computed 和 watch 函数有哪些不同?
Vue3 的 computed 和 watch 函数有哪些不同?
|
6月前
|
缓存 JavaScript
computed和methods的区别
computed和methods的区别
58 1
|
6月前
|
缓存 JavaScript
Vue计算属性 computed
Vue计算属性 computed
|
缓存 JavaScript
vue计算属性 computed
vue计算属性 computed
|
缓存
computed和watch
computed和watch
|
6月前
|
缓存 JavaScript
对比vue中watch和computed
watch 和 computed 都是用于监听数据变化并执行相应操作的选项,但它们的使用场景和优劣势有所不同。在实际开发中,应根据具体需求选择合适的选项。
|
6月前
|
JavaScript
我对computed的理解-以及computed的传参
我对computed的理解-以及computed的传参