vue-常见用法for

目录

v-for使用

循环显示正方形

动态绑定ID

根据ID设置属性

自定义组件多重v-for循环


v-for使用

<div id="app">
        <!--v-for循环普通数组-->
        <div v-for="(item,index) in list">单项:{{item}}---索引号:{{index}}</div>
        <div v-for="item in list">---单项---{{item}}</div>

        <!--v-for循环对象数组-->
        <div v-for="person in arrObj">id:{{person.id}}---name:{{person.name}}</div>
        <div v-for="(person,index) in arrObj">id:{{person.id}}---name:{{person.name}}---索引号:{{index}}</div>

        <!--v-for循环对象-->
        <div v-for="(value,key,index) in obj">值:{{value}}---键:{{key}}---索引:{{index}}</div>

        <!--v-for迭代数字-->
        <div v-for="count in 10">{{count}}</div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                list: [1, 2, 3, 4, 5, 6],
                arrObj: [{
                        id: 1,
                        name: "name1"
                    },
                    {
                        id: 2,
                        name: "name2"
                    }, {
                        id: 3,
                        name: "name3"
                    }, {
                        id: 4,
                        name: "name4"
                    }
                ],
                obj: {
                    name: "stain",
                    age: 27,
                    job: "engineer"
                }
            }
        });
    </script>

循环显示正方形

 

<div v-for="person in arrObj" class="square">
  {{person.name}}
</div>
.square {
  width: 150px;
  height: 150px;
  background: dodgerblue;
}

.square:after {
  content: "";
  display: block;
  /*padding-bottom: 10%;!* padding百分比相对父元素宽度计算 *!*/
  margin-top: 50%; /* margin 百分比相对父元素宽度计算 */

}
.square:before {
  content: "";
  display: block;
  /*padding-bottom: 100%;*/
  margin-top: 50%; /* margin 百分比相对父元素宽度计算 */

}
arrObj: [
          {
          id: 1,
          name: "name1"
        },
          {
            id: 2,
            name: "name2"
          },
          {
            id: 3,
            name: "name3"
          },
          {
            id: 4,
            name: "name4"
          }
         ]

动态绑定ID

<div v-for="person in arrObj" class="square" @click="dowm(person.id)" @mouseover="mouseOver(person.id)"
                 @mouseleave="mouseLeave(person.id)" :style="backgroundData" :id="person.id">
              {{person.name}}
 </div>

根据ID设置属性

mouseLeave: function (idx) {
        $("#"+idx).css({"width":"150px" ,"height":"150px"});
}

自定义组件多重v-for循环

list: [
          {author: Mike, content: 'Mike content', subitem: [1, 2, 3]},
          {author: Jack, content: 'Jack content', subitem: [4, 5, 6]},
    ]



例子1: 单循环

<listitem v-for="(listitem,listindex) in list" :key="listindex"
              :content1="listitem" :no="listindex">
</listitem>

例子:多重循环

 <listitem2 v-for="(listitem,listindex) in list" :key="listindex"
              :content1="listitem" :no="listindex">
        <listitemnum2 v-for="(n,nindex) in listitem.subitem" :num="n" :key="nindex"></listitemnum2>
</listitem2>

 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页
实付 49.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值