Vue监视属性

最新推荐文章于 2023-10-11 21:08:23 发布

前端程序员路易

最新推荐文章于 2023-10-11 21:08:23 发布

阅读量1k

点赞数 1

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

本文链接：https://blog.csdn.net/qq_46582421/article/details/121295292

版权

本文介绍了Vue.js中关于天气属性的案例，包括天气属性的显示、属性的监视与深度监视。通过示例代码展示了如何利用`watch`进行属性监听，以及在属性变化时执行相应操作。同时，提到了`watch`的深度监视功能，用于监测对象内部值的改变，并提供了简写形式的写法。最后，讨论了`computed`与`watch`的区别，强调了`watch`在处理异步操作时的优势。

摘要由CSDN通过智能技术生成

一、天气属性

代码：

<!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 type="text/javascript" src="../js/vue.js"></script>
    <link rel="shortcut icon" href="../ico—全图标/application/iMovie.ico" type="image/x-icon">
</head>
<body>
    <div id="root">
        <h2>今天天气很{
   {
   info}}</h2>
        <!-- 绑定事件的时候: @xx="yy yy可以写些简单的语句 -->
        <!-- <button @click="isHot = !isHot">切换天气</button> -->
        <button @click="changeWeather">切换天气</button>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;//阻止vue在启动时生成生产提示

    //创建Vue实例
    const vm = new Vue({
   
        el:'#root',
        data:{
   
            isHot:true,
        },
        computed:{
   
            info(){
   
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods: {
   
            changeWeather(){
   
                this.isHot = !this.isHot
            }
        },
    })
</script>
</html>

结果：
在这里插入图片描述

二、天气案例_监视属性

监视属性watch:

1.当被监视的属性变化时，回调函数自动调用，进行相关操作
2.监视的属性必须存在，才能进行监视! !
3.监视的两种写法:
(1) . new Vue时传入watch配置
(2)。通过vm. $watch监视

代码：

<!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 type="text/javascript"