computed计算属性

qq_45696089

于 2020-07-27 15:03:20 发布

阅读量137

点赞数

本文链接：https://blog.csdn.net/qq_45696089/article/details/107452730

版权

计算属性

首先它可以当做一个属性去使用，不需要在data中定义
然后它可以在计算属性中定义大量的逻辑计算，最终得到想要的结果
一般使用场景购物车
普通写法，返回的是你要写入的数据

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        普通写法------{{x+y}}
        <h2>计算属性写法-----{{result}}</h2>
        <h1>字符串翻转-------{{str.split('').reverse().join('')}}</h1>
        <h2>计算机属性字符串翻转-------{{reverse}}</h2>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            x: 10,
            y: 2,
            str: 'zifuchuanfanzhuan'
        },
        computed: {
            msg() {
                // 这里可以写大量的数据，最终得到想要的结果
                // return 1;
                return '计算属性内容';
            },
            result() {
                let a = this.x + this.y;
                return a;
            },
            reverse() {
                return this.str.split('').reverse().join('');
            }
        },
    })
</script>
</html>

通过当前计算属性的变化可以重新给get赋值

<body>
    <div id="app">
        <input type="text" v-model='cx'>
        计算属性------{{cx}}
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
        	num:0
        },
        computed: {
            cx: {
                get() {
                    return this.num;
                },
                set(val) {
                    console.log(val);
                    this.num = val;
                }
            }
        },
    })
</script>

qq_45696089

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
computed计算属性

计算属性首先它可以当做一个属性去使用，不需要在data中定义然后它可以在计算属性中定义大量的逻辑计算，最终得到想要的结果一般使用场景购物车<body> <div id="app"> <h1>{{msg}}</h1> 普通写法------{{x+y}} <h2>计算属性写法-----{{result}}</h2> <h1>字符串翻转-------
复制链接

扫一扫