07class和style绑定

# class和style绑定

# class绑定

<div :class="[{a:bool},'b']"></div>

new Vue({
  el: "#app",
  data: {
    bool:false,
  }
});

1
2
3
4
5
6
7
8

%accordion% 练习🚀 %accordion%

<div id="app">
    <div :class="{'a':isClass}"> 打印：class="a" </div>
    <div :class="['a',{'b':isClass}]"> 打印：为false:a，为true的时候打印：class="a b" </div>
</div>

<script>
    new Vue({
        el: "#app",
            data: {
                isClass: true, //true:出现a,b   false:出现a
            }
    })
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13

%/accordion%

# style绑定

//vue自动帮我们添加了浏览器前缀，所以不需要写浏览器前缀
<div :style="[{color: abc},{background:'blue'}]">内容</div>

new Vue({
  el: "#app",
  data: {
    abc:"red"
  }
});

1
2
3
4
5
6
7
8
9

%accordion% 练习💢 %accordion%

<div id="app">
    <div :style="{color:abc}">这种给文字添加颜色</div>
    <div :style="[{color: abc},{background:'red'}]">这种给文字和背景添加颜色</div>
</div>

<script>
    new Vue({
        el: "#app",
            data: {
                abc: "yellow",
            }
    });
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13

%/accordion%

# 练习

使用vue做一个选项卡效果

<div class="tab">
  <div class="tab-title">
    <div 
      v-for="(item,idx) of title" 
      :class="idx === current ? 'on' : null"
      @click="changeTitle(idx)"
    >{{item}}</div>
  </div>
  <div class="tab-content">
    <div 
      v-for="(item,idx) of content" 
      :class="idx === current ? 'on' : null"
    >{{item}}</div>
  </div>
</div>

new Vue({
  el: "#app",
  data: {
    current:0,
    title:["标题一","标题二","标题三"],
    content:["123","456","789"]
  },
  methods: {
    changeTitle(idx){
      this.current = idx
    }
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

编辑

上次更新: 2023/08/06, 00:38:41

← 06方法-计算属性-监听器 08条件渲染→