10Vue过滤器的使用 

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-text,v-html指令</title>
<script src="node_modules/vue/dist/vue.js"></script>
<link href="node_modules/layui-src/src/css/layui.css" rel="stylesheet">
</head>

<body>
<div id="app">
<table class="layui-table">
<colgroup>
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th>昵称</th>
<th>生日</th>
<th>个性签名</th>
<th>性别</th>
<th>个性颜色</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(user,index) in userList" :key="user.id">
<td>{{user.name}}</td>
<td v-text="user.birthDay"></td>
<td>{{user.notice | noticeReplace}}</td>
<td>{{user.sex | handlerSex}}</td>
<td v-html="user.colorDemo"></td>
<td><button type="button" class="layui-btn layui-btn-warm layui-btn layui-btn-sm layui-btn-radius"
@click="delUser(user.id)">删除</button></td>
</tr>
</tbody>
</table>
</div>
<!--过滤器的使用 过滤器仅限使用{{}}渲染-->
<script>
var vm = new Vue({
el: '#app',
data: {
sex:"",
userList: [
{ "id": 1, sex: 1, "name": "张三", "birthDay": "2020-01-01", "notice": "生活就像一把杀猪刀", "colorDemo": "<span style='color:red'>红色</span>" },
{ "id": 2, sex: 2, "name": "李四", "birthDay": "2020-02-01", "notice": "生活就像一把杀猪刀", "colorDemo": "<span style='color:green'>绿色</span>" },
{ "id": 3, sex: 2, "name": "王五", "birthDay": "2020-03-01", "notice": "生活就像一把杀猪刀", "colorDemo": "<span style='color:blue'>蓝色</span>" }
]
},filters:{
handlerSex(sex){
if(sex==1){
return '男';
}else if(sex==2){
return '女';
}else{
return '未知';
}
},noticeReplace(notice){
return notice.replace('就像','不像');
}
}
})
</script>
</body>

</html>

 

 

所需依赖：

1.npm i vue

2.npm i layui-src

 

源码：http://files.cnblogs.com/files/sansui/10Vue%E8%BF%87%E6%BB%A4%E5%99%A8%E7%9A%84%E4%BD%BF%E7%94%A8.zip

posted @ 2020-03-15 03:19  洋三岁  阅读(166)  评论(0)    收藏  举报
友情链接: 梦想农夫