Vue.js常用指令，事件绑定等，Vue过滤器解析状态,过滤器多个参数。vue表格状态解析。vue解析类型，element ui解析类型，状态，el-tag

按照html的编码显示：v-html

 <div class="font_info" v-html="item.Content">{{item.Content}}</div>

这种方式在使用的时候要注意，很容易造成xss攻击

Vue-bind属性绑定

v-bind:属性名="内容"

简写:

:属性名="内容"

小例子：

<!-- 绑定属性 -->
<div v-bind:title="title">嘿嘿</div>
<div :title="title">哈哈</div>
<!-- 绑定地址 -->
<img v-bind:src="url" height="400" width="600"/>

Vue.js事件绑定

<button v-on:click="run()">执行方法的第一种写法</button>
<button @click="run()">执行方法的 简写 写法</button>

改变事件是这样的v-on:change="prochange()"

<select id="provice" v-on:change="prochange()"></select>

v-for循环指令
code:

<div id="content">
    <table>
        <tr v-for="item in userinfo">
            <td v-bind:vl="item.Id">{{item.Id}}</td>
            <td :vl="item.Id">{{item.UserName}}</td>
            <td>{{item.Number}}</td>
            <td>{{item.UserClass}}</td>
            <td><a href="#" @@click="handlerRemove">删除</a></td>
        </tr>
    </table>
</div>

v-if条件指令，解析状态
code1:可以实现显示与否

<div id="app-3">
    <p v-if="seen">现在你看到我了</p>
</div>
<script>
    var app = new Vue({
        el: "#app-3",
        data: {
            seen: false
        }
    })
</script>

code2:使用v-if来解析状态

<td v-bind:checktype="item.CheckType">
    <span v-if="item.CheckType==1" class="label label-success">审核成功</span>
    <span v-else-if="item.CheckType==2" class="label label-info">正在审核</span>
    <span v-else class="label label-danger">审核失败</span>
</td>

也可以这样，只用v-if，不用v-else

<div style="width: 29px;height: 29px;line-height: 29px;text-align: center;">
  <span v-if="litem.labs.doType==1">必做</span>
  <span v-if="litem.labs.doType==2">拓展</span>
</div>

放内容多一点也可以

<div v-if="litem.labs.doType==1"
  style="width: 29px;height: 29px;line-height: 29px;text-align: center;position:absolute;left: -10px;top:-13px;font-size: 10px;background-color: #43e677;border-radius: 50%;">
  <span >必做</span>
</div>
<div v-if="litem.labs.doType==2"
  style="width: 29px;height: 29px;line-height: 29px;text-align: center;position:absolute;left: -10px;top:-13px;font-size: 10px;background-color: #FBC31F;border-radius: 50%;">
  <span >拓展</span>
</div>

vue表格解析状态
其实一般也是使用v-if来做

<el-table-column prop="doType" label="类型">
  <template slot-scope="scope">
    <p v-if="scope.row.doType==1">必做</p>
    <p v-if="scope.row.doType==2">拓展</p>
  </template>
</el-table-column>

配合tag标签使用

<el-table-column prop="feedbackType" label="类型">
    <template slot-scope="scope">
        <el-tag type="danger" v-if="scope.row.feedbackType == 1">系统问题</el-tag>
        <el-tag type="warning" v-if="scope.row.feedbackType == 2">内容问题</el-tag>
        <el-tag v-if="scope.row.feedbackType == 3">我要吐槽</el-tag>
    </template>
</el-table-column>

vue过滤器解析状态
代码如下：

filters: {
  examineTypeFilter: function (value) {
	 if(value==1)
		return "审核成功";
	 else if(value==2)	
		return "审核失败";
	 else
		return "等待审核";
  }
}

使用：

:examineType="item.isPass|examineTypeFilter"

过滤器多个参数往后面写就行：

Vue.filter("filter_link_front_behind",function(front,start,url,behind){
	// console.log("---------------");
	// console.log(front);
	// console.log(start);
	// console.log(url);
	// console.log(behind);
	return start+front+url+behind;
})

使用：

:href="item.userName|filter_link_front_behind('http://m.xx.net/','/article/UserCategory/',item.aClassId)"