前端技术:vue(计算属性+监视)

最新推荐文章于 2024-05-16 22:29:05 发布

xy724518356

最新推荐文章于 2024-05-16 22:29:05 发布

阅读量440

点赞数

分类专栏： vue相关文章标签： vue 前端技术

本文链接：https://blog.csdn.net/xy724518356/article/details/100162038

版权

vue相关专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、计算属性

1) 在 computed 属性对象中定义计算属性的方法 
2) 在页面中使用{{方法名}}来显示计算的结果

在这里插入图片计算属性描述

二、监视属性

1) 通过通过 watch 配置或者vm 对象的$watch()或 来监视指定的属性 
2) 当属性变化时, 回调函数自动调用, 在函数内部进行计算

在这里插入图片描述

三、计算属性的get/set

1) 通过 getter/setter 实现对属性数据的显示和监视 
2) 计算属性存在缓存, 多次读取只执行一次 getter 计算

在这里插入图片描述

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        姓：<input type="text" v-model="name_a"><br/>
        名：<input type="text" v-model="name_b"><br/>
        姓名1：<input type="text" v-model="name"><br/>
        姓名2：<input type="text" v-model="name2"><br/>
        姓名3：<input type="text" v-model="name3">
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
       const vm = new Vue({
            el:'#app',
            data(){
                return {
                    name_a:'A',
                    name_b:'B',
                    name2:'A B'
                }
            },
            //计算属性：方法的返回值作为属性值
            computed:{
                name(){
                    return this.name_a+' '+this.name_b
                },
                name3:{
                    //获取值
                    get:function(){
                        return this.name_a+' '+this.name_b
                    },
                    //监视
                    set:function(val){
                        const name = val.split(' ')
                        this.name_a = name[0]
                        this.name_b = name[1]
                    }
                }
            },
           //监视方法1 watch配置
            watch:{
                name_a:function(val){
                    this.name2 = val + ' ' + this.name_b
                 }
            }
        })
       //a.b.c：a对象的b属性的值c
       //监视方法2 vm.$watch（'a.b.c'，function(newVal, oldVal){}）
       vm.$watch('name_b',function(val){
           this.name2 =  this.name_a+' '+val
       })
    </script>
</body>
</html>

xy724518356

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端技术:vue(计算属性+监视)

一、计算属性1) 在 computed 属性对象中定义计算属性的方法 2) 在页面中使用{{方法名}}来显示计算的结果二、监视属性1) 通过通过 watch 配置或者vm 对象的$watch()或来监视指定的属性 2) 当属性变化时, 回调函数自动调用, 在函数内部进行计算三、计算属性的get/set1) 通过 getter/setter 实现对属性数据的显示和监视 2...
复制链接

扫一扫