动态样式绑定

  • 绑定class属性(对象语法)

    • 绑定方式：

      1. <h2 class="green grey" :class="{blue:isBlue,red:isRed}">动态样式绑定——绑定class属性(对象语法)</h2>

    • class和:class可以共存，class是最后渲染上的

    • blue、red是在style里面声明的属性
    • isBlue、isRed是在data里面声明的布尔值

  • 绑定classs属性(数组语法)

    1. <!-- 点击按钮实现文字颜色的切换 -->
    2. <h2 :class="cssArray">动态样式绑定——绑定class属性(数组语法)</h2>
    • cssArray是在data里面声明的数据，数组值是对应style声明的样式
    • 对数组的操作
      • this.cssArray[i]取值，对数组的操作：pop()删除，push()增加
    • 常用的数组操作
      • push(param…)加入元素到数组的尾部
      • pop()从数组的尾部弹出一个元素
      • shift()从数组的头部移除一个元素
      • unshift(param…)加入元素到数组的头部
      • splice()可以实现指定下标的数组元素的删除、插入、替换
      • sort()数组排序
      • reverse()数组倒序排序

  • 绑定style属性

    1. <h2 :style="{color:'red','font-size':fontSize+'px'}">绑定style属性红色h2</h2>
    • fontSize是在data里面定义的数值型的值，可以动态改变字体大小

      表单数据绑定

      1、v-model的基础用法

  • 说明：

    • v-bind指令，可以通过模型数据去影响视图
    • v-model可以将表单输入绑定到对应的模型数据

  • 实现

    • 视图输入会改变数据，数据改变会影响视图，双向数据绑定
    • image.png

      2、v-model绑定radio和checkbox

  • 实现单选和多选的方式有两种

    • input标签type=radio实现单选和type=checkbox实现的多选
      • 使用radio实现单选，v-model绑定的数据应该是同一个。才能实现按钮之间的互斥
      • checkbox实现多选，v-model绑定的数据应该是同一个，多选才能属于同一个数组
    • select标签-option标签实现的单选和多选
      • 代码实现
      • image.png
      • 注意：
        • v-model绑定模型数据gender，实现单选效果
        • v-model绑定模型数据checks，结合multiple属性实现多选效果
        • 多选选项的模型数据为数组类型
        • 可以为单选及多选设置默认值，即：默认的勾选项

          4、v-model的修饰符

  • lazy修饰符：默认情况下，input输入会实时影响v-model绑定的数据。加上lazy修饰符，只有当输入框失去焦点会输入回⻋的时候，才会去改变v-model绑定的数据。

  • number修饰符：默认情况下，输入框中输入的无论是数字还是字母，都会被当做字符串处理。加上number修饰符，输入内容会被当做数值类型处理。

  • trim修饰符：可以自动去掉输入内容左右两边的空格

    计算属性和侦听器

    1、计算属性computed的用法

  • 通过计算属性computed得到的计算结果会被缓存 。计算因子不发生变化，就不会发生重复计算的行为。若在函数中计算属性fullName被使用了三次，但计算属性的computed属性计算只调用一次，后两次使用缓存 所以性能更高

  • 实现：

    • image.png

      2、计算属性set和get方法

  • 监听计算因子的变化(get方法 )：任何计算因子发生变化都会导致计算属性重新计算

  • 监听计算属性本身的变化(set方法)：当计算因子发生变化时，可以使用set方法进行一些操作

    3、属性的侦听watch

  • player是一个对象，当我们需要侦听对象属性的变化时，需要设置参数deep:true。否则侦听无效。注意监听数组的变动时不需要设置deep:true（前提是要用数组响应式函数操作数组，直接通过数组下标操作数组不是响应式的，也无法被侦听到。

  • 当我们希望页面加载的时候，handler方法就被调用（可用于数据初始化）。需要设置参数immediate:true.否则只有在侦听属性发生变化时，handler才会被调用
  • 设置了参数immediate:true，所以在⻚面加载的时候handler函数就会被调用
  • 什么时候使用watch
    • 同时需要改变之后的新值和变化之前的旧值
    • 数据变化需要执行异步操作或者其他开销比较大的操作时