Vue--class,style,if,for概览

---

标签的Class属性

class是一个属性，可以用v-bind来指定，普通的方式要求使用者自己控制字符串，但字符串的拼接略显麻烦，所以有专门的处理方式。

• 传递一个对象
  通过控制对象某个键对应的boolean类型值，来控制class是否被需要：

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

data : {
    isActive: true, 
    hasError: false
}

//或是如下直接声明类，调用属性
//<div v-bind:class="classObject"></div>
//
//data : {
//    classObject: {
//        active: true,
//        'text-danger': false
//    }
//}

//或是如下直接声明类，调用计算属性
//data: {
//    isActive: true,
//    error: null
//},
//computed: {
//    classObject: function () {
//        return {
//            active: this.isActive && !this.error,
//            'text-danger': this.error && this.error.type === 'fatal',
//        }
//    }
//}

最终渲染得到的结果为：

<div class="static active"></div>

对应的boolean类型值发生变化，bind的class属性也会随之变化。

• 传递一个数组
  通过传递一个数组，来指定class的值：

<div v-bind:class="[isActive ? activeClass : '', errorClass]">

data: {
    activeClass: 'active',
    isActive: true,
    errorClass: 'text-danger'
}

最终渲染为：

<div class="active text-danger"></div>

• 总结

两种类型，传递对象的需要通过true或是false来控制显示，如果是频繁的去除、添加某属性时非常适用；
传递数组是通过直接传值显示，如果是多种属性频繁切换，那么我认为这种情况更适合用列表而不是对象。

---

标签的内联样式

1. 可以传递一个对象，与class属性传递对象的方式一样，直接传递或是传递一个对象类型的属性或是计算属性
2. 此时的对象key为属性名，值为属性值。
3. 属性名字可以为驼峰式 camelCase；或是分隔式 kebab-case
4. 同样可以传递数组，数组中每个元素都是一个对象，包含一个或多个样式key, value的对象
5. 自动添加前缀

---

条件渲染

• 概览
  v-if ： 值为一个属性，或是一个表达式
  v-show : 与 v-if 类似，只是此 v-show 会始终渲染并保持在dom中，简单切换 display 属性； 除此之外，这个不支持 template 语法，即包含多个标签
  v-else : 与 v-if 或 v-show配合使用(下面第二例)

• 简单示例

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

• 多个元素
  因为v-if必须放在一个元素里，所以一次只能控制一个元素以及其子元素，若要同时控制多个元素：

<template v-if="ok">
    <h1>Title</h1>
    <p>Paragraph 1</p>
</template>
<template v-else>
    <!--略-->
</template>

• 多层 if 最后一个 else
  有时候有多个条件，则可以嵌套进行 if-else

<div v-if=""></div>
<template v-else> 
    <div v-if=""></div>
    <div v-else></div>
</template>

• 总结
  

  v-if 是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。
  v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。
  相比之下， v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。
  一般来说， v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。

---

列表渲染

• 概览
  v-for ： 让某个标签元素循环出现，一般值都以表达式：item in items 这种形式出现

• 基本示例

<ul>
    <li v-for="item in items">item.text</li>
</ul>

data: {
    items: [
        {text: 'foo' },
        {text: 'Bar' }
    ]
}

如果想要在循环过程中使用index，则可以这样使用：

<li v-for="(item,index) in items">item.text</li>

• 遍历列表
  与条件判断类似， v-for 也有 template 特性；

<ul>
    <template v-for="item in items">
        <li>{{ item.msg }}</li>
        <li class="divider"></li>
    </template>
</ul>

• 遍历对象
  除了可以遍历列表（数组）中的元素，也可以遍历对象的键值对，差别在于，在遍历对象时候， v-for 的表达式为 :

<li v-for="(value, key, index) in objectItem"><li>

需要注意的是顺序，先值，后键，最后索引

• 遍历整数

<li v-for="item in 10"><li>

那么结果就是[1, 10]遍历

• 列表操重点
  
  1. 直接做如下操作，将不会引起视图变化！

vm.items[indexOfItem] = newValue

而是需要用vue自带 set 方法：

Vue.set(example1.items, indexOfItem, newValue)

1. 想要直接修改列表长度属性来改变列表内容长度，也是不可取的，如下：

vm.items.length = newLength
// 或是
// example1.items.splice(indexOfItem, 1, newValue)

而是要使用 splice 方法：

example1.items.splice(newLength)

关于splice方法，可见此处。

可使用可改变视图的方法有很多：push()，pop()，shift()，unshift()，splice()，sort()，reverse()等