前端框架Vue----计算属性

最新推荐文章于 2024-05-31 05:33:12 发布

laufing

最新推荐文章于 2024-05-31 05:33:12 发布

阅读量1.2k

点赞数 1

分类专栏：前端框架Vue 文章标签： vue.js 计算属性动态关联

本文链接：https://blog.csdn.net/weixin_45228198/article/details/121893650

版权

前端框架Vue 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

需求

在这里插入图片描述
如图，要求输入框输入的内容在下面动态地显示

思路：
数据驱动页面模板的渲染
data变化，则页面重新渲染

插值方式

插值方式，实现动态显示

<div id="container">
        <input type="text" name='username' placeholder="输入用户名" v-model="username"><br>
        <input type="text" name='age' placeholder="输入年龄" v-model="age"><br>
        <span>{{ username }}--{{ age }}</span>
    </div>

    <script>
        Vue.config.productionTip = false
        
        new Vue({
            el: "#container",
            data: {
                username: "",
                age: "",
            },
        })
    </script>

函数方式

函数方式，实现动态显示

<div id="container">
        <input type="text" name='username' placeholder="输入用户名" v-model="username"><br>
        <input type="text" name='age' placeholder="输入年龄" v-model="age"><br>
        <span>{{ func() }}</span>
    </div>

    <script>
        Vue.config.productionTip = false
        
        new Vue({
            el: "#container",
            data: {
                username: "",
                age: "",
            },
            methods: {
                func(){
                    return this.username + "--" + this.age
                },
            },
        })
    </script>

计算属性

该计算属性原本不存在，当第一次获取/底层计算依赖的属性变化时，调用底层的getter函数，返回值赋给Vue实例对象，即计算所得的属性赋给Vue实例对象；修改该属性值时，调用底层的setter函数。

计算属性，内部有缓存机制，比普通的函数高效。

<div id="container">
        <input type="text" name='username' placeholder="输入用户名" v-model="username"><br>
        <input type="text" name='age' placeholder="输入年龄" v-model="age"><br>
        <span>{{ concat }}</span>
        <span>{{ concat }}</span>
    </div>


    <script>
        Vue.config.productionTip = false
        
        const vm = new Vue({//在控制台打印，可以看到vm对象具有计算属性，
            // 且可以看到计算属性的值，看不到计算的逻辑代码
            el: "#container",
            data: {
                username: "",
                age: "",//属性必须先定义，才可以在页面中使用
            },
            methods: {
                func(){//写普通的方法，this 是Vue实例对象
                    return this.username + "--" + this.age
                },
            },
            computed: {//使用已有的属性，进行计算所得的属性
                concat: { //concat为计算属性，
                    get(){ //第一次调用或者依赖的属性变化时，调用
                        console.log("执行getter")
                        // 返回值作为concat的值，concat计算属性放到Vue实例上
                        // Vue实例及原型中的属性，均可在页面中使用
                        //this 是Vue实例对象
                        return this.username + "-" + this.age
                    },
                    set(){},
                },
                compute1: {
                    get(){
                        return 'compute1'
                    },
                    set(value){
                        this.username = value
                    },
                },
            },
        })
    </script>

在这里插入图片描述
上图中，第一次渲染页面，调用一次计算属性；后面输入值，使计算属性依赖的原有属性发送变化，又调用两次。

如下为计算属性赋值，执行setter的结果：
在这里插入图片描述

计算属性的简写

在使用计算属性时，只读取的情况下，可以简单写成如下形式：

computed: { //只读取的计算属性
	concat(){ //当作getter使用
         return '简写计算属性'
         },
},

计算属性的使用场景

模板视图中，插值语法中的js表达式尽量简单化，涉及到计算的时候采用计算属性

计算属性应用案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性应用</title>
    <script src="/static/js/vue.js"></script>
</head>
<body>
    <style>
        .btn{
            display: block;
            background-color: lightblue;
            border-radius: 10%;
        }
    </style>
    <div id="container">
        <!-- 插值语法简单化，这里复杂地写只是为了演示 -->
        <div>插值复杂语法: {{ sex?"Male":"Female" }}</div>
        <br>
        <button class='btn' @click='changeSex'>点击改变</button>
        <br>
        <div>查看信息(计算属性): {{ info }}</div>
    </div>

    <script type="text/javascript">
        new Vue({
            el: '#container',
            data: {
                sex: false,
                lauf: '依赖属性的值',
            },
            methods: {
                changeSex: function(event){
                    // event事件源
                    // this 是Vue实例对象
                    this.sex = !this.sex
                },
            },
            computed: { //计算属性
                info(){
                    return this.lauf
                },
            },
        })
    </script>
</body>
</html>

在这里插入图片描述

laufing

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端框架Vue----计算属性

目录需求方式一方式二需求如图，要求输入框输入的内容在下面动态地显示思路：数据驱动页面模板的渲染data变化，则页面重新渲染方式一插值方式，实现动态显示<div id="container"> <input type="text" name='username' placeholder="输入用户名" v-model="username"><br> <input type="text" name='age' plac
复制链接

扫一扫