Vue v-for操作与computed结合功能
2024-08-29 07:30:44
<!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>
最新文章
- Activty四种启动模式
- IOS中控制器的重要方法使用
- 读pomelo的教程-2
- JSP技术
- ORCL_INSTALL_WIN10
- es6新特性：
- BeanUtils数据封装与表单JavaBean
- 浙大pat 1035题解
- vue初学实践之路——vue简单日历组件(1)
- js贪吃蛇-简单版
- awk之FIELDWIDTHS字段宽度
- Mac下使用终端连接远程使用ssh协议的git服务器
- jQuery AJAX与jQuery事件的分析讲解
- jQuery效果之简单的手风琴效果
- 移植Valgrind检测Android JNI内存泄漏
- P4770 [NOI2018]你的名字
- webstorm技巧
- Python3.7 + jupyter安装（CentOS6.5）
- vue+Element-ui实现分页效果
- url的param与dict转换