vue样式与遍历

1:计算属性(依赖较少的数据监听)


image.png

效果图:


image.png

计算属性:
image.png

效果图:


image.png

2:第一种样式写法
<div :class="[a1,a2]">我借你{{money}},你还我{{a}},还剩下{{b}}</div>
data() {
    return {
      a1: "test-1",
      a2: "test-2",
    };
  },

效果图


image.png

第二种样式写法

<div :class="{'test-1':a3}">示例一</div>
data() {
    return {
      a3: true
    };
  },

第三种样式写法

<div :class="obj">示例二</div>
data() {
    return {
      obj: {
        "test-1": true
      }
    };

3:循环
item、idx是自己定义的

<ul>
      <li :key="item" v-for="(item,idx) in list">{{item}},{{idx}}</li>
</ul>

分组用法

<template v-for="item in list">
        <li :key="item+1">hello</li>
        <li :key="item">{{item}}</li>
      </template>

效果:


image.png
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读