Vue v-for操作与computed结合功能

Posted tommymarc

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue v-for操作与computed结合功能相关的知识，希望对你有一定的参考价值。

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

 

以上是关于Vue v-for操作与computed结合功能的主要内容，如果未能解决你的问题，请参考以下文章

computed传参

vuejs中的v-for怎样动态增加循环数据

vue中使用v-for时为啥不能用index作为key？

Vue v-for操作对象与数值

vue中v-for 与 v-if 使用错误

vue实现CheckBox与数组对象绑定