vue常用指令

v-text

v-text主要用来更新textContent，可以等同于JS的text属性。

v-html

双大括号的方式会将数据解释为纯文本，而非HTML。为了输出真正的HTML，可以用v-html指令。它等同于JS的innerHtml属性。

v-pre

v-pre主要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的节点加快编译。

v-cloak

这个指令是用来保持在元素上直到关联实例结束时进行编译。

v-once

v-once关联的实例，只会渲染一次。之后的重新渲染，实例极其所有的子节点将被视为静态内容跳过，这可以用于优化更新性能。

v-if

根据表达式的值的真假条件渲染元素，在切换时元素及它的数据绑定/组件被销毁并重建。v-if 控制元素的渲染 v-if 为假 该元素不会创建

v-show

根据表达式之真假值，切换元素的display CSS 属性。 可以控制元素的显示隐藏通过display none

v-for

循环指令，基于一个数组或对象渲染一个列表，Vue 2.0 以上必须需配合key值使用。绑定一个 标签 循环一个数据源 数组 表格 数字 字符串

v-bind

动态地绑定一个或多个特性，或一个组件prop到表达式。 属性后面跟的是固定字符串 作用：属性绑定可以让属性后面 跟变量或者表达式

v-on

用于监听指定元素的DOM事件，比如点击事件。绑定事件监听器。 事件名=‘事件处理函数’ 事件名和原生JS一样

v-model

实现表单输入和应用状态之间的双向绑定。 相当于事件绑定v-on和属性绑定v-bind的综合（集合体）

style，class的样式切换

style

<div v-bind:style="flag?'{color:red}':{color:blue}"></div>

class

<div v-if="flag" class="box">1<div>
<div v-if="!flag" class="box">1<div>
//用V-show也可以
或
<div :class="{ 'active': isActive, 'sort': isSort }">2</div>

js部分

data() {
  return {
    isActive: true,
    isSort: false
  }
}, 

上面是单选部分，下面是多选

<div v-bind:style="flag?'{color:red}':{color:blue}" @click="xz">1</div>
<div v-bind:style="flags?'{color:red}':{color:blue}" @click="xzs">2</div>
<div v-bind:style="flagss?'{color:red}':{color:blue}" @click="xzss">3</div>
<div v-bind:style="flagsss?'{color:red}':{color:blue}" @click="xzsss">4</div>
<div v-bind:style="flagssr?'{color:red}':{color:blue}" @click="xzssr">5</div>
<button @click="cz">重置</button>

Js部分

data() {
  return {
    flag: true,
    flags: true,
    flagss: true,
    flagsss: true,
    flagssr:true,
  }
}, 
methods: {
    cz(){
      this.flag=true
      this.flags=true
      this.flagss=true
      this.flagsss=true
      this.flagssr=true
    },
    xz(){
    	this.flag=false
    },
    xzs(){
    	this.flags=false
    },
    xzss(){
    	this.flagss=false
    },
    xzsss(){
    	this.flagsss=false
    },
    xzssr(){
    	this.flagssr=false
    }
  }