Vue 第八讲（计算属性和监听属性）

最新推荐文章于 2024-04-22 10:59:28 发布

是我来晚了！

最新推荐文章于 2024-04-22 10:59:28 发布

阅读量219

点赞数 1

分类专栏：前端文章标签： vue python java javascript js

本文链接：https://blog.csdn.net/weixin_51927215/article/details/116354468

版权

前端专栏收录该内容

29 篇文章 1 订阅

订阅专栏

Vue

计算属性介绍
计算属性方法
监听属性

计算属性介绍

计算属性（computed）是 Vue 其中的配置项

语法：address:function(){} 相当于 address:{get:function(){}}

好处：若我们定义一个输入框，用 v-model:value="变量" 可以双向绑定一个变量（此变量是被定义在配置项 data 内），变量在函数发生变化，则相应的输入框显示也会发生变化，若我们也是绑定一个变量，只是该变量是被定义在配置项 computed 内，那么该变量就能自己充当函数的作用，在 Vue 内实现相关的代码，并将返回值传递给视图界面，在很大程度上可以解决很多问题，以及避免了代码的冗余

<!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>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="susu">
        <input type="text" v-model:value="calcu">
    </div>
    <script>
        new Vue({
            el:"#susu",
            data:{},
            methods:{},
            computed:{
                calcu:function(){
                    return (3*4)
                }
            }
        })
    </script>
</body>
</html>

计算属性方法

语法：address:{set:function(){},get:function(){}}

此处我们将变量（address）称为一个对象，对象有二个方法（set 方法和 get 方法），其中在这个实例中，get 方法用于，将前三个输入框的内容拼接后渲染在第四个输入框内，set 方法用于，将第四个输入框的内容进行某种剪切后，分别填充到前三个输入框内

<!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>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="box">
        <span>省：&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</span>
        <input type="text" v-model:value="province">
        <br>
        <br>
        <span>市：&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</span>
        <input type="text" v-model:value="city">
        <br>
        <br>
        <span>区：&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</span>
        <input type="text" v-model:value="district">
        <br>
        <br>
        <span>详细地址:</span>
        <input type="text" v-model:value="address">
    </div>
    <script>
        new Vue({
            el:"#box",
            data:{
                province:"",
                city:"",
                district:""
            },
            computed:{
                address:{
                    get:function(){
                        var result = "";
                        if (this.province){
                            result += this.province + "省"
                        }
                        if (this.city){
                            result += this.city + "市"
                        }
                        if (this.district){
                            result += this.district + "区"
                        }
                        return result
                    },
                    set:function(value){
                        var result = value.split(/省|市|区/)

                        if(result && result.length > 1 ){
                            this.province = result[0]
                        }
                        if(result && result.length > 2 ){
                            this.city = result[1]
                        }
                        if(result && result.length > 3 ){
                            this.district = result[2]
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>

在浏览器中实现 get 方法，我们输入（奥特曼，木星，奥罗拉）后，在最后一栏自动渲染出了（奥特曼省木星市奥罗拉区）

在这里插入图片描述
在浏览器中实现 set 方法，我们在最后一栏输入（小鸡省小狗市小小区）后，在前三栏得到了自动补全

在这里插入图片描述

监听属性

监听属性（watch）是 Vue 其中的配置项

Vue 变量（v1，v2），将输入框与变量（v1）双向绑定，配置项（watch）的功能是监听某个变量（v1）的变化，并可以获取到其新值和旧值，利用延时函数 setTimeout(()=>{this.v2 = newvalue},1000) 可以将变量（v1）新值在做出改变后 1s 传递给变量（v2），将标签与变量（v2）双向绑定，通过二边的渲染速度，可以更好的了解

<!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>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="susu">
        <input type="text" v-model:value="v1">
        <p>{{v2}}</p>
    </div>  
    <script>
        new Vue({
            el:"#susu",
            data:{
                v1:"",
                v2:"",
            },
            methods:{},
            watch:{
                v1:function(newvalue,oldvalue){
                    setTimeout(()=>{this.v2 = newvalue},1000)
                }
            }
        })
    </script>
</body>
</html>