Vue指令（3）：v-bind、计算属性、watch(监控)与深度监控

最新推荐文章于 2024-05-23 07:33:10 发布

?abc!

最新推荐文章于 2024-05-23 07:33:10 发布

阅读量485

点赞数 1

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

本文链接：https://blog.csdn.net/yyuggjggg/article/details/120884317

版权

Vue 专栏收录该内容

15 篇文章 4 订阅

订阅专栏

v-bind(操作属性值)

在属性上使用vue的数据

通过插值的方式并不能实现属性的替换，所以使用v-bind

插值表达式不能用在标签的属性中。

于是使用新的指令来解决：v-bind

语法：

v-bind:属性名="Vue中的变量"

可以简写为：

:属性名='属性值'

例如：

<div v-bind:class="color"></div>
//与下面这个效果一样
<div :class="color"></div>

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            color: white;
        }
        .red {
            background-color: red;
        }
        .blue {
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="va">
        <button @click="color='red'">红色</button>
        <button @click="color='blue'">蓝色</button>
        <div :class="color">
            点击按钮改变背景颜色。
        </div>
    </div>
<script>
    var va = new Vue({//创建一个vue实例
        el:"#va",
        data:{
            color:"red"
        }
    });
</script>
</body>
</html>

效果：通过点击实现背景的切换

class属性的特殊用法

Vue对class属性进行了特殊处理，可以接收数组或对象格式

例如：

<div :class="{ red: true,blue:false }"></div>

对象中，key是已经定义的class样式的名称，如本例中的： red 和 blue
对象中，**value是一个布尔值，**如果为true，则这个样式会生效，如果为false，则不生效。

v-bind的作用：可以对所有元素的属性设置vue实例的数据。

上面的案例可以简写为：

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            color: white;
        }
        .red {
            background-color: red;
        }
        .blue {
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="va">
        <button @click="bool=!bool">点我改变下面色块颜色</button>
        <div :class="{red:bool,blue:!bool}">
            点击按钮改变背景颜色。
        </div>
    </div>
<script>
    var va = new Vue({//创建一个vue实例
        el:"#va",
        data:{
            bool:false
        }
    });
</script>
</body>
</html>

效果：通过点击按钮，实现属性的Boolean值一直切换

计算属性的使用

computed计算属性的应用场景：

可以应用在插值或者指令表示式复杂的时候。

因为可以将一些属性数据经过方法处理之后返回。

实现将一个日期时间值转换为yyyy-MM-dd格式字符串

不使用计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
    <style type="text/css">

    </style>
</head>
<body>
    <div id="va">
        <h2>
            你的生日为：
            {{new Date(birthday).getFullYear()}}
            -{{new Date(birthday).getMonth()+1}}
            -{{new Date(birthday).getDay()}}
        </h2>
    </div>
<script>
    var va = new Vue({//创建一个vue实例
        el:"#va",//el即element，要渲染的页面元素
        data: {
            birthday:292903285601
        }
    });
</script>
</body>
</html>

使用计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
    <style type="text/css">

    </style>
</head>
<body>
    <div id="va">
        <h2>
            你的生日为：{{birth}}
        </h2>
    </div>
<script>
    var va = new Vue({//创建一个vue实例
        el:"#va",//el即element，要渲染的页面元素
        data: {
            birthday:292903285601
        },
        computed:{
            birth(){
                const date = new Date(this.birthday);
                return date.getFullYear() + "-" + (date.getMonth()+1) + "-" +
                    date.getDay();
            }
        }
    });
</script>
</body>
</html>

watch(监控)和深度监控

使用：

在vue实例中数据属性，因为在页面中修改而产生了变化，可以通过watch监控获取其改变前后的值。

如果是修改的对象数据属性，可以开启深度监控获取修改后最新的对象数据。

如：Student.name，当name属性发生了变化之后，深度监控会将修改之后的数据获取到进行更新

watch使用场景：

可以监控视图中数据的变化而做出响应；

如：下拉框列表中，当如果选择了对于的下拉框选项之后，要根据最新的值去加载一些其它数据的话。

以前定义监控时，person是一个函数，现在改成了对象，并且要指定两个属性：

deep:代表深度监控，不仅监控person变化，也监控person中属性变化
handler：就是以前的监控处理函数

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
    <style type="text/css">

    </style>
</head>
<body>
    <div id="va">
        <input v-model="message"/>
        <hr><br>
        <input v-model="person.name"><br>
        <input v-model="person.age"> <button @click="person.age++">+</button>
        <h2>
            姓名为：{{person.name}}；年龄为：{{person.age}}
        </h2>
    </div>
<script>
    var va = new Vue({//创建一个vue实例
        el:"#va",//el即element，要渲染的页面元素
        data: {
            message:"hello vue",
            person:{"name":"张三", "age":12}
        },
        watch:{
            message(newValue, oldValue){
                console.log("新值：" + newValue + "；旧值：" + oldValue);
            },
            person: {
                //开启深度监控，可以监控到对象属性值的变化
                deep: true,
                //监控的处理方法
                handler(obj){
                    console.log("name = " + obj.name + ", age=" + obj.age);
                }
            }
        }
    });
</script>
</body>
</html>

效果：

?abc!

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue指令（3）：v-bind、计算属性、watch(监控)与深度监控

v-bind(操作属性值)在属性上使用vue的数据通过插值的方式并不能实现属性的替换，所以使用v-bind插值表达式不能用在标签的属性中。于是使用新的指令来解决：v-bind语法：v-bind:属性名="Vue中的变量"可以简写为：:属性名='属性值'例如：<div v-bind:class="color"></div>//与下面这个效果一样<div :class="color"></div>测试代码：<!DOC
复制链接

扫一扫