Vue 计算属性

最新推荐文章于 2024-05-19 20:18:26 发布

挚夕

最新推荐文章于 2024-05-19 20:18:26 发布

阅读量24

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_52549425/article/details/131542140

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

引入

案例

差值语法实现

<body>
    <div id="app">
        姓: <input @keyup="" v-model="lastName" type="text"> <br>
        名: <input @keyup="" v-model="name" type="text"> <br>
        全名: <span>{{lastName.slice(0,4)}} - {{name}}</span>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        new Vue({
            el: "#app",
            data() {
                return {
                    lastName: '张',
                    name: '三'
                };
            }
        });
    </script>
</body>

methods方法实现

<body>
    <div id="app">
        姓: <input @keyup="" v-model="lastName" type="text"> <br>
        名: <input @keyup="" v-model="name" type="text"> <br>
        全名<span>{{fullName()}}</span>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        new Vue({
            el: "#app",
            data() {
                return {
                    lastName: '张',
                    name: '三'
                };
            },
            methods: {
                fullName(){
                    return lastName.slice(0,4) + name;
                }   
            }
        });
    </script>
</body>

计算属性简介

要显示的数据不存在，要通过计算得来。
在 computed 对象中定义计算属性。
在页面中使用{{方法名}}来显示计算的结果。

使用计算属性

body>
    <div id="app">
        姓: <input @keyup="" v-model="lastName" type="text"> <br>
        名: <input @keyup="" v-model="name" type="text"> <br>
        全名<span>{{fullName}}</span>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        var vm = new Vue({
            el: "#app",
            data() {
                return {
                    lastName: '张',
                    name: '三'
                };
            },
            computed: {
                fullName:{
                    //读取fullName时被调用(1.初次读取 2.数据发生变化)
                    get(){
                        return this.lastName.slice(0,4) + "-" + this.name;
                    },
                    set(value){
                        let arr = value.split("-");
                        this.lastName = arr[0];
                        this.name = arr[1];
                    }
                }
            }
        });
    </script>
</body>
```

# 简写
```html
<body>
    <div id="app">
        姓: <input @keyup="" v-model="lastName" type="text"> <br>
        名: <input @keyup="" v-model="name" type="text"> <br>
        全名<span>{{fullName}}</span>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        var vm = new Vue({
            el: "#app",
            data() {
                return {
                    lastName: '张',
                    name: '三'
                };
            },
            computed: {
                // 计算属性只读时
                // fullName:function(){
                //     return this.lastName.slice(0,4) + "-" + this.name;
                // }
                fullName(){
                    return this.lastName.slice(0,4) + "-" + this.name;
                }
            }
        });
    </script>
</body>
```