Vue-条件,列表渲染-key的底层原理

前言

🚩🚩🚩
💎个人主页: 阿选不出来
💨💨💨
💎个人简介: 一名大二在校生, 不定时更新自己学习道路上的一些笔记.
💨💨💨
💎目前开发的专栏: JS 🍭Vue🍭JS进阶
💨💨💨
💎接上一篇 Vue-模板语法-计算属性与监听属性的介绍和差异

一.class与style绑定

操作元素的class列表和内联样式是数据绑定的一个常见需求.我们很容易想到用 v-bind 来添加这些属性(通过表达式计算出字符串即可).

但是这样做的弊端无疑就是拼接字符串很麻烦. 因此,vue.js 在使用 v-bind 进行class 与 style 绑定的时候,做出了如下改变:

表达式结果的类型除了字符串以外,还可以是数组或者对象的形式.

绑定 HTML Class

对象语法

适用于: 要绑定多个样式, 个数不确定, 名字也不确定

• 绑定一个class

  • HTML:
  • data: data: {isActive: true}
  • 结果:

• 绑定多个class

  • HTML:

  • data: data: {isActive: true, hasError: false}

  • 结果:

    注意: 如果绑定的class类很多,我们也可以只绑定一个样式对象,例

    html:

    data: data: {classObj:{active: true, text-danger: false}}

• 绑定一个返回对象的计算属性

  • HTML:

  • 结果:

    computed: {
    	classObject: function(){
    		return {
    			//...
    		} 
    	}
    }
    1
    2
    3
    4
    5
    6
    7

    增大了class绑定的灵活性.

数组语法

• 绑定一个或多个属性
  • HTML:
  • data: data: {activeClass: 'active',errorClass: 'text-danger'}
  • 结果:
• 数组元素还可以是三元表达式
  • HTML:

多重值

从2.3.0起你可以为 style绑定中的 property 提供一个包含多个值的数组, 常用于提供多个带前缀的值:

eg:

二.条件渲染

v-if

作用

v-if 指令用于条件渲染一块内容.这块内容只会在指令的表达式返回 truthy 值得时候被渲染.

写法

1. v-if
2. v-else-if
3. v-else

注意: v-if可以和v-else-if, v-else一起使用, 但要求结构不能被"打断"

分组条件渲染

在