vue属性计算和监听

最新推荐文章于 2023-07-12 23:51:02 发布

虽千万人吾往矣

最新推荐文章于 2023-07-12 23:51:02 发布

阅读量146

点赞数

分类专栏： vue 文章标签： vue js javascript jquery

本文链接：https://blog.csdn.net/weixin_44575660/article/details/107516344

版权

vue 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

1、计算属性

计算属性是属性之间的关系，例如性是一个属性，名是一个属性，姓名也是一个属性，姓名就是与性和名组成的
通过computed属性定义函数，将拼接的结果返回

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03_计算属性和监视</title>
</head>
<body>
<div id="demo">
  姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
  名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
  <!--fullName是根据fistName和lastName计算产生-->
  姓名(单向): <input type="text" placeholder="Full Name" v-model="fullName"><br>

</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  const vm = new Vue({
    el: '#demo',
    data: {
      firstName: 'A',
      lastName: 'B',
       fullName2: 'A-B'
    },

    // 计算属性配置: 值为对象
    computed: {
      fullName() { // 属性的get()
        return this.firstName + '-' + this.lastName
      }
    }
  });
</script>
</body>
</html>

2、监听属性

属性监听有两种方法
第一种方法:在watch监听属性，当属性改变时触发，例如果名改变，姓名就改变，姓改变，姓名也会改变。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算属性和监视</title>
</head>
<body>

<div id="demo">
  姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
  名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
  <!--fullName是根据fistName和lastName计算产生-->
  姓名(单向): <input type="text" placeholder="Full Name" v-model="fullName"><br>

</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  const vm = new Vue({
    el: '#demo',
    data: {
      firstName: '李',
      lastName: '力',
      fullName: '李 力'
    },
    watch: {
      firstName: function (value) {
        this.fullName = value + ' ' + this.lastName
      },
      lastName: function (value) {
        this.fullName = this.firstName + ' ' + value
      }
    }
  })
</script>
</body>
</html>

第二种方法:通过vm.$watch传递属性值和匿名函数实现监听

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算属性和监视</title>
</head>
<body>

<div id="demo">
  姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
  名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
  <!--fullName是根据fistName和lastName计算产生-->
  姓名(单向): <input type="text" placeholder="Full Name" v-model="fullName"><br>

</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  const vm = new Vue({
    el: '#demo',
    data: {
      firstName: '李',
      lastName: '力',
      fullName: '李 力'
    }
  })
  vm.$watch('firstName',function (value) {
    this.fullName = value + ' ' + this.lastName
  })
  vm.$watch('lastName',function (value) {
    this.fullName = this.firstName + ' ' + value
  })

</script>
</body>
</html>

3、计算属性高级

通过setter/getter实现对属性的显示和监听，计算属性存在缓存，多次读取只执行依次getter计算。可以实现双向监听

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_计算属性和监视</title>
</head>
<body>

<div id="demo">
    姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
    名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
    <!--fullName是根据fistName和lastName计算产生-->
    姓名(双向): <input type="text" placeholder="Full Name1" v-model="fullName"><br>

</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    const vm = new Vue({
        el: '#demo',
        data: {
            firstName: '李',
            lastName: '力',
            fullName2: '李 力'
        },
        computed: {
            fullName: {
                get() {
                    return this.firstName + ' ' + this.lastName
                },
                set(value) {
                    const name = value.split(' ')
                    this.firstName = name[0]
                    this.lastName = name[1]
                }
            }
        }
    });

</script>
</body>
</html>

虽千万人吾往矣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue属性计算和监听

1、计算属性计算属性是属性之间的关系，例如性是一个属性，名是一个属性，姓名也是一个属性，姓名就是与性和名组成的通过computed属性定义函数，将拼接的结果返回<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>03_计算属性和监视</title></head><body><div id="demo"
复制链接

扫一扫

专栏目录