vue中class和style绑定以及函数和计算属性的区别()

Class 与 Style 绑定

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute,所以我们可以用 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 用于 和 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。

v-bind
v-bind
class
style

绑定HTML Class

对象

我们可以传给 一个对象,以动态地切换 class:

v-bind:class
<div v-bind:class="{ active: isActive }"></div>

或者直接写类名
<div v-bind:class="obj"></div>


<script>
    obj{
        active: isActive
	}
</script>

三元表达式

<div :class="ischange?'red':'green'">三元表达式改变颜色</div>

数组

<div class="box" :class="[border,{bgClor:isColor}]">class绑定--数组语法写法二</div>

border: "border",
isColor: true,

绑定Style

的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用引号括起来) 来命名:

v-bind:style

对象

<div :style="{
          background: "red",
          fontSize: "30px",
          color: "#fff"
        }">style绑定</div>


或者直接写对象名

<div :style="styObj">style绑定</div>


styObj: {
  background: "red",
  fontSize: "30px",
  color: "#fff"
},

注意属性名称

注意属性名称

数组

<div :style="styArr">style绑定--数组</div>

styArr: [
  { "background": "red" },
  { "color": "blue" }
]

计算属性和函数的区别

目的 执行次数 return是否必须 是否依赖缓存
计算属性 计算结果 依赖缓存,计算过的属性不再计算,执行一次 必须 依赖
函数 事件处理 调用几次,执行几次,没有缓存 不是必须 不依赖
————————

Class 与 Style 绑定

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute,所以我们可以用 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 用于 和 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。

v-bind
v-bind
class
style

绑定HTML Class

对象

我们可以传给 一个对象,以动态地切换 class:

v-bind:class
<div v-bind:class="{ active: isActive }"></div>

或者直接写类名
<div v-bind:class="obj"></div>


<script>
    obj{
        active: isActive
	}
</script>

三元表达式

<div :class="ischange?'red':'green'">三元表达式改变颜色</div>

数组

<div class="box" :class="[border,{bgClor:isColor}]">class绑定--数组语法写法二</div>

border: "border",
isColor: true,

绑定Style

的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用引号括起来) 来命名:

v-bind:style

对象

<div :style="{
          background: "red",
          fontSize: "30px",
          color: "#fff"
        }">style绑定</div>


或者直接写对象名

<div :style="styObj">style绑定</div>


styObj: {
  background: "red",
  fontSize: "30px",
  color: "#fff"
},

注意属性名称

注意属性名称

数组

<div :style="styArr">style绑定--数组</div>

styArr: [
  { "background": "red" },
  { "color": "blue" }
]

计算属性和函数的区别

目的 执行次数 return是否必须 是否依赖缓存
计算属性 计算结果 依赖缓存,计算过的属性不再计算,执行一次 必须 依赖
函数 事件处理 调用几次,执行几次,没有缓存 不是必须 不依赖