关于vue 常用指令，以及动态添加样式，单选效果，多选效果样式实现

1.vue常用指令

1.v-once
能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定

2.v-show
和v-if一样 区别是if是注释掉 v-show是给一个display：none的属性 让它不显示！ 用法 参考下一个v-if指令.

3.v-if
v-if后面的是一个表达式或者也可以是返回true或false的表达式。 且值为true和fasle false的话就会被注释 v-show是给一个display：none的属性 让它不显示！ true就正常显示。

4.v-else
必须和v-if一起用才可以 不能单独用 而且必须在v-if下面 中间有别的标签也会报错

5.v-for
基于数据渲染一个列表，类似于JS中的遍历。其数据类型可以是 Array | Object | number | string
该指令之值，必须使用特定的语法(item, index) in items, index是索引，可以省略。item是 为当前遍历元素提供别名(可以自己随便起名字) 。v-for的优先级别高于v-if之类的其他指令

7.v-html
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 而且给一个标签加了v-html 里面包含的标签都会被覆盖。

8.v-text
给一个便签加了v-text 会覆盖标签内部原先的内容

9.v-bind
绑定属性，可以简写为":"

10.10.v-on
绑定事件，可以简写为"@"

11.v-model
v-model是一个指令，限制在、、、components中使用 用于数据的双向绑定操作.

2.动态添加，切换样式

动态绑定style

<template>
  <div>
    <div :style="{ color: a }">哈哈哈</div>
   <!-- <div:style="{样式的属性名:变量}">哈哈哈</div>-->
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: "red",
    };
  },
};
</script>

<style>
</style>

动态绑定calss

<template>
  <div :class="{ active: isActive }">123</div>
    <!-- <div :class="{类名:变量}">123</div> -->
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
    };
  },
};
</script>

<style>
.active {
  color: red;
  background: pink;
}
</style>

单选效果

<template>
  <div class="aaa">
    <div
      v-for="(item, index) in list"
      :key="index"
      :class="item.isActive ? 'active' : 'actives'"
      @click="onClick(index)"
    >
      {{ item.title }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { title: 1, isActive: false },
        { title: 2, isActive: false },
        { title: 3, isActive: false },
        { title: 4, isActive: false },
        { title: 5, isActive: false },
        { title: 6, isActive: false },
      ],
    };
  },
  methods: {
    onClick(index) {
      this.list.forEach((item) => {
        item.isActive = false;
      });
      this.list[index].isActive = true;
    },
  },
};
</script>

<style>
.aaa {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  word-wrap: wrap;
}
.active {
  width: 5%;
  height: 50px;
  background: pink;
  border: 1px solid gray;
  margin-left: 10px;
}
.actives {
  width: 5%;
  height: 50px;
  border: 1px solid gray;
  margin-left: 10px;
  background: blue;
}
</style>

多选效果

<template>
  <div class="aaa">
    <div
      v-for="(item, index) in list"
      :key="index"
      :class="item.isActive ? 'active' : 'actives'"
      @click="onClick(index)"
    >
      {{ item.title }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { title: 1, isActive: true },
        { title: 2, isActive: true },
        { title: 3, isActive: true },
        { title: 4, isActive: true },
        { title: 5, isActive: true },
        { title: 6, isActive: true },
      ],
    };
  },
  methods: {
    onClick(index) {
      console.log(index);
      this.list[index].isActive = !this.list[index].isActive;
    },
  },
};
</script>

<style>
.aaa {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  word-wrap: wrap;
}
.active {
  width: 5%;
  height: 60px;
  background: pink;
  border: 1px solid gray;
  margin-left: 10px;
}
.actives {
  width: 5%;
  height: 60px;
  border: 1px solid gray;
  margin-left: 10px;
  background: red;
}
</style>