vue.js - vuejs 如何将一个数组类型的属性,根据数组元素的不同绑定到多个元素上

问题描述

问 题

假设 vue实例中有一个数组,需要将里面的数据根据条件渲染到页面的三个列表中,如何实现?

var vm = new Vue({
    data:{
     arr : [{name:'aaa',type:1},{name:'aaa',type:2},{name:'aaa',type:3}...]
    }
})

对应的html,需要根据每个元素的type放到不同的ul中

<!--type=1时-->
<ul>
    <li  v-for='(item,index) in arr'>item</li>
</ui>
<!--type=2时-->
<ul>
    <li  v-for='(item,index) in arr'>item</li>
</ui>
<!--type=3时-->
<ul>
    <li  v-for='(item,index) in arr'>item</li>
</ui>

解决方案

最简单的方法
每个li上面加一个 v-if="item.type == 1"

这篇关于vue.js - vuejs 如何将一个数组类型的属性,根据数组元素的不同绑定到多个元素上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！