松鼠乐园 松鼠乐园
  • 注册
  • 登录
  • 首页
  • 快捷入口
    • Vue
    • Tensorflow
    • Springboot
    • 语言类
      • CSS
      • ES5
      • ES6
      • Go
      • Java
      • Javascript
    • 工具类
      • Git
      • 工具推荐
    • 服务器&运维
      • Centos
      • Docker
      • Linux
      • Mac
      • MySQL
      • Nginx
      • Redis
      • Windows
    • 资源类
      • 论文
      • 书籍推荐
      • 后端资源
      • 前端资源
      • html网页模板
      • 代码
    • 性能优化
    • 测试
  • 重大新闻
  • 人工智能
  • 开源项目
  • Vue2.0从零开始
  • 广场
首页 › Vue2.x从零开始 › watch属性的使用

watch属性的使用

迦娜王
2年前Vue2.x从零开始
811 0 0

watch属性的使用

侦听属性的出现,可以实现在数据发生变化时,处理一些逻辑。比如数据的联动更新。现在我们通过代码的方式来表达:

[loginview]

<template>
    <div>
        <p>{{a}}</p>
        <p>{{b}}</p>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                a: 'aaaa',
                b:''
            }
        },
        watch:{
            a(newval,oldval){
                console.log(oldval)
                console.log(newval)
                this.b = newval
            }
        },
        mounted() {
            this.a = 'new data'
        }
    }
</script>

我们默认初始化2个变量,监听a发生变化时,把b也赋值为a的值。我们发现watch的写法大体上和计算属性是一致的。watch可以有参数,第一个是新的值,第二个是旧的值,如果你用不到的话,可以不写参数。

运行结果:

都输出了新的值。

计算属性和侦听属性联合使用

我们发现watch的写法在名称上就是变量的名称(计算属性的名称可以自己定义)。如果我们要监听vuex的变量呢,那该如何写了呢?有时候我们只要监听对象里面的某个值变化,又该怎么写了呢。其实也不难,利用计算属性把变量翻译下即可。为了演示这个过程,代码:

<template>
    <div>
        <p>{{a}}</p>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                person: {
                    age: 10,
                    name: '张珊'
                },
                a: 0
            }
        },
        computed: {
            myAge() {
                return this.person.age
            }
        },
        watch: {
            myAge(nval, oval) {
                this.a = nval
            }
        },
        mounted() {
            this.person.age = 30
        }
    }
</script>

我们通过改变person.age来触发a变量的值也跟着变化。我们并没有直接对a变量进行赋值。而是通过watch来实现的。

页面输出:

[/loginview]

0
本文系作者 @迦娜王 原创发布在 松鼠乐园。未经许可,禁止转载。
computed属性的使用
上一篇
Windows环境编译nginx
下一篇
评论 (0)

请登录以参与评论。

现在登录
  • watch属性的使用
  • 计算属性和侦听属性联合使用
相关文章
router的使用
computed属性的使用
vuex的简单使用
filters的使用
松鼠乐园

资源整合,创造价值

小伙伴
墨魇博客 无同创意
目录
重大新闻 Centos CSS Docker ES5 ES6 Go Java Javascript Linux Mac MySQL Nginx Redis Springboot Tensorflow Vue Vue2.x从零开始 Windows 书籍推荐 人工智能 前端资源 后端资源 壁纸 开源项目 测试 论文
Copyright © 2018-2021 松鼠乐园. Designed by nicetheme. 浙ICP备15039601号-4
  • 重大新闻
  • Centos
  • CSS
  • Docker
  • ES5
  • ES6
  • Go
  • Java
  • Javascript
  • Linux
  • Mac
  • MySQL
  • Nginx
  • Redis
  • Springboot
  • Tensorflow
  • Vue
  • Vue2.x从零开始
  • Windows
  • 书籍推荐
  • 人工智能
  • 前端资源
  • 后端资源
  • 壁纸
  • 开源项目
  • 测试
  • 论文
热门搜索
  • jetson nano
  • vue
  • java
  • mysql
  • 人工智能
  • 人脸识别
迦娜王
坚持才有希望
1224 文章
33 评论
233 喜欢
  • 0
  • 0
  • Top