vue笔记-计算属性以及监视的简单使用

最新推荐文章于 2024-05-06 18:29:18 发布

青和的小宝箱

最新推荐文章于 2024-05-06 18:29:18 发布

阅读量102

点赞数

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

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

vue计算属性以及监视的简单使用

一、计算属性

计算属性的表达式十分便利，计算属性的设计非常简单。在计算属性中放入大量计算会使计算复杂和混乱。

在这里插入图片描述

在computed属性对象中定义计算属性的方法, 在页面中使用{{方法名}}来显示计算的结果.
在使用计算属性时, 都会用到缓存.

computed: {
            xxx () { // 属性的get()
                console.log('model1()', this)
                return this.taste + '-' + this.food
            },

二.监视

watch: {
            // 配置监视xxx
           xxx: function (value) { // 相当于属性的set
                console.log('    ', value)
                // 更新model2
                this.model2 = value + '-' + this.food
            }

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

计算属性以及监视的使用

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性和监视</title>
</head>
<body>
<div id="demo">
    taste: <input type="text" placeholder="taste" v-model="taste"><br>
    food: <input type="text" placeholder="food" v-model="food"><br>
    <!--是根据taste和food计算产生-->
    food(单向): <input type="text" placeholder="Model1" v-model="model1"><br>
    food(单向): <input type="text" placeholder="Model2" v-model="model2"><br>
    food(双向): <input type="text" placeholder="Model3" v-model="model3"><br>
</div>

<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript">
    const vm = new Vue({
        el: '#demo',
        data: {
            taste: 'sweet',
            food: 'milk',
            model2: 'sweet-milk'
        },

        // 计算属性配置: 值为对象
        computed: {
            model1 () { // 属性的get()
                console.log('model1()', this)
                return this.taste + '-' + this.food
            },

            model3: {
                // 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值
                get () {
                    console.log('model3 get()')
                    return this.taste + '-' + this.food
                },
                // 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值
                set (value) {// model3的最新value值  A-B23
                    console.log('model3 set()', value)
                    // 更新taste和food
                    const names = value.split('-')
                    this.taste = names[0]
                    this.food = names[1]
                }
            }
        },

        watch: {
            // 配置监视taste
            taste: function (value) { // 相当于属性的set
                console.log('watch taste', value)
                // 更新model2
                this.model2 = value + '-' + this.food
            }
        }
    })

    // 监视food
    vm.$watch('food', function (value) {
        console.log('$watch food', value)
        // 更新model2
        this.model2 = this.taste + '-' + value
    })

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




class 以及style的绑定

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04_class与style绑定</title>
  <style>
    .classA {
      color: red;
    }
    .classB {
      background: blue;
    }
    .classC {
      font-size: 20px;
    }
  </style>
</head>
<body>

<!--
1. 理解
  在应用界面中, 某个(些)元素的样式是变化的
  class/style绑定就是专门用来实现动态样式效果的技术
2. class绑定: :class='xxx'
  xxx是字符串
  xxx是对象
  xxx是数组
3. style绑定
  :style="{ color: activeColor, fontSize: fontSize + 'px' }"
  其中activeColor/fontSize是data属性
-->

<div id="demo">
  <h2>1. class绑定: :class='xxx'</h2>
  <p :class="myClass">xxx是字符串</p>
  <p :class="{classA: hasClassA, classB: hasClassB}">xxx是对象</p>
  <p :class="['classA', 'classB']">xxx是数组</p>

  <h2>2. style绑定</h2>
  <p :style="{color:activeColor, fontSize}">:style="{ color: activeColor, fontSize: fontSize + 'px' }"</p>

  <button @click="update">更新</button>

</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      myClass: 'classA',
      hasClassA: true,
      hasClassB: false,
      activeColor: 'red',
      fontSize: '20px'
    },

    methods: {
      update () {
        this.myClass = 'classB'
        this.hasClassA = !this.hasClassA
        this.hasClassB = !this.hasClassB
        this.activeColor = 'yellow'
        this.fontSize = '30px'
      }
    }
  })
</script>
</body>
</html>