vue学习笔记（二）

class与style绑定

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

data(){
	return{
	isActive: true
}
}

绑定内联样式：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
  activeColor: 'red',
  fontSize: 30
}

条件渲染

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

<div v-if="awesome">
    leve is awesome 
</div>

使用template作为不可见元素包裹多个需要条件渲染的区块。

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-show

v-show决定隐藏还是显示一个元素，但是元素始终会被渲染且保留在DOM中，v-show类似css中的visible属性，v-if为false时类似于disable:false。

注意，v-show 不支持 <template> 元素，也不支持 v-else。

<h1 v-show="ok">Hello!</h1>

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。