Vue v-for操作与computed结合功能
作者： thtomatic 分类： Vue 评论: [ 0 ] 条 浏览: [ 1643 ] 次
演示代码:
<!doctype html>
<html lang="en">
<head id="head">
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<title>{{title}}</title>
</head>
<body>
<div id="ask"><!--vue不能控制body和html的标签-->
<li v-for="v in stus">
{{v.name}} ======> {{v.sex}}
</li>
<input type="radio" v-model="type" value="all" checked> 全部
<input type="radio" v-model="type" value="boy" > 男孩
<input type="radio" v-model="type" value="girl" > 女孩
</div>
<script>
var vue = function (options){new Vue(options)};
vue({
el:'#head',
data:{
title:'Vue v-for操作与computed结合功能'
}
});
var app = vue({
//element
el:'#ask',
computed:{
stus(){
if(this.type == 'all'){
return this.user;
}else{
/*es6写法 防止用不了this.type*/
return this.user.filter((v)=>{
return v.sex == this.type;
})
}
}
},
data:{
type:'all',
user:[
{name:'小刘',sex:'boy'},
{name:'小王',sex:'boy'},
{name:'小花',sex:'girl'},
{name:'小芳',sex:'girl'},
]
}
});
</script>
</body>
</html>
效果:
版权所有：《thtomatic》 => 《Vue v-for操作与computed结合功能》
本文地址：https://ask.mykeji.net/Vue/241.html
除非注明，文章均为 《简单记录》 原创，欢迎转载！转载请注明本文地址，谢谢。
发表评论：