Vue计算属性

原创已于 2022-07-01 23:56:41 修改 · 80 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

于 2022-06-22 15:08:17 首次发布

Vue 专栏收录该内容

11 篇文章

订阅专栏

本文详细讲解了Vue中计算属性的使用方法，包括如何创建计算属性来处理复杂逻辑，初次读取与依赖变化时的get与set回调，以及简写get的用法。通过实例演示了如何结合`v-model`实现动态计算显示。

Vue计算属性

对于任何包含响应式数据的复杂逻辑，都应该去使用计算属性（computed）。

示例：

<div id="app">
    A：<input type="text" v-model="a"><br>
    B：<input type="text" v-model="b"><br>
    A+B：<span>{{ab}}</span><br>
    A+B：<span>{{ab1}}</span>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false;   //阻止vue在启动时生成生产提示

    const vm = new Vue({
        el: '#app',
        data: {
            a: 'A',
            b: 'B'
        },
        methods: {

        },
        computed: {
            ab:{
              // 1.初次读取ab时，get就会被调用，返回值为ab的值，然后缓存起来
              // 2.所依赖的数据发生变化时，也会调用get
              get(){
                  console.log('get被调用了')
                  return this.a + '-' + this.b;
              },
              //当ab被修改时调用(vm.ab='xx')
              set(value){
                console.log('set',value)
              }
            },
            //简写(当只有get时可简写)
            ab1(){
                console.log('简写get被调用了')
                return this.a + '-' + this.b;
            }
        }
    })
</script>