故如虹,知恩;故如月,知明
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2024TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
欢迎加群交流技术

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

5518人阅读 2019/4/13 17:06 总访问:3840106 评论:0 收藏:0 手机
分类: Js相关


按照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)"


欢迎加群讨论技术,群:677373950(满了,可以加,但通过不了),2群:656732739

评价