<!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>