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

1. vue常用指令

 v-text 输出变量。
 v-html 输出变量 能解析html标签。
 v-bind 给元素动态绑定属性 还可以绑定类名和css样式等。
 v-on 给元素动态绑定事件 例如点击事件，change事件， input输入事件。
 v-if 判断变量 根据真假条件渲染元素。
 v-show 跟v-if一样 判断变量 切换元素的 display CSS 属性。
 v-else-if 再次进行判断等v-if 判断条件结束时执行 v-else-if 必须配合 v-if使用。
 v-else 是在前面的判断都不符合条件的时候执行v-else 必须配合 v-if/v-else-if使用。
 v-once 能执行一次性地插值，当数据改变时，插值处的内容不会更新。
 v-model：实现表单输入和应用状态之间的双向绑定 只适用于表单元素。
 v-pre：跳过这个元素和它的子元素的编译过程。跳过大量没有指令的节点会加快编译。

2. v-if与v-show的区别，以及使用场景

1.v-if 当判断条件为真的时候 进行显示元素 当判断条件为假的时候 删除元素而不是隐藏元素
2.v-show 跟v-if一样 当条件为真时 进行显示元素 条件假时 隐藏元素而不是删除元素

使用场景：

1. v-if 不频繁使用元素的时候用v-if
   例如：点击立即报名 然后报名成功 切换成立即学习 这种的就可以使用v-if
2. v-show 频繁使用元素的时候使用v-show
   例如：选项卡的切换

3. 动态添加样式 style,class样式

1. 给元素动态绑定 v-bind:style=’’ 可以简写为：:style=’’

 <template>
    <div>
        <p :style="{backgroun:abc}">123</p>
    </div>
</template>
<script>
export default {
    data() {
        return {
            abc:red,
        };
    },
};
</script>

2. 给元素动态绑定 v-bind:class=’’ 可以简写为:class

 <template>
    <div>
        <p :class="red">abc</p>
    </div>
</template>
<style scoped>
.red{
    background: red;
}
</style>

4. 单选效果

	<div v-if="flag" class="box">1<div>
	<div v-if="!flag" class="box">1<div>
	//用V-show也可以或
	<div :class="{ 'active': isActive, 'sort': isSort }">2</div>

js

	data() {
	  return {
	    isActive: true,
	    isSort: false
	  }
	}, 

5.多选效果

	<div v-bind:style="flag?'{color:red}':{color:blue}" @click="xz">1</div>
	<div v-bind:style="flags?'{color:red}':{color:blue}" @click="xzs">2</div>
	<div v-bind:style="flagss?'{color:red}':{color:blue}" @click="xzss">3</div>
	<div v-bind:style="flagsss?'{color:red}':{color:blue}" @click="xzsss">4</div>
	<div v-bind:style="flagssr?'{color:red}':{color:blue}" @click="xzssr">5</div>
	<button @click="cz">重置</button>

js

	data() {
  return {
    flag: true,
    flags: true,
    flagss: true,
    flagsss: true,
    flagssr:true,
  }
}, 
methods: {
    cz(){
      this.flag=true
      this.flags=true
      this.flagss=true
      this.flagsss=true
      this.flagssr=true
    },
    xz(){
    	this.flag=false
    },
    xzs(){
    	this.flags=false
    },
    xzss(){
    	this.flagss=false
    },
    xzsss(){
    	this.flagsss=false
    },
    xzssr(){
    	this.flagssr=false
    }
  }

本文地址：https://blog.csdn.net/weixin_47242632/article/details/109578460