vue五v-show v-if

绑定样式：

1. class样式

写法:class=“xxx” xxx可以是字符串、对象、数组。
字符串写法适用于：类名不确定，要动态获取。
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

2. style样式

							:style="{fontSize: xxx}"其中xxx是动态值。
							:style="[a,b]"其中a、b是样式对象。

样式对象值得是 fontSize这样有固定书写规范的

注意
v-bind :绑定了一个属性 就vue实例就可以操作这个属性
所以 想绑定class属性时
:class="mood"这个class就可以动态指定属性
data里就得这个mood
methods里就可以 用this.mood来变换

一句话 要发生变化的样式 用v-:绑定

1. 给要发生变化的样式:class=“样式”
2. 在data里加上
3. 在函数里变换

1. 用:样式名

适用于：有很多样式类名已经写好 用哪个样式类名不确定，要动态获取
例如 三个样式点击 随机变换

<div class="basic" :class="mood" @click="changeMood">{{name}}</div>
data: {
      name: 'YK菌',
      mood: 'normal'
    },
    methods: {
      changeMood() {
        const arr = ['happy', 'sad', 'normal']
        const index = Math.floor(Math.random() * 3)
        this.mood = arr[index]
      }

2. 用数组

如果要 三个样式同时存在 用数组
适用于：要绑定多个样式，个数不确定，要用哪个样式也不确定

<div class="arr"></div>
data: {
            arr:['样式一','样式二','样式三']
            },
         methods: {
             
         },

然后再函数里 写arr.shift() arr.puh来操作
注意:
在<div class="[a,b,c]"></div>中 表示data 中abc的值可以变换
若<div class="["a","b","c"]"></div>表示值写死

3. 用对象

适用于: 要绑定的样式个数确定 绑定哪个也确定 但要动态确定用不用

<div class="basic" :class="classObj">{{name}}</div>
data: {
      name: 'YK菌',
      classObj: {
        yk1: true,
        yk2: false,
        yk3: true
      }
    }

若为true 显示 若为false不显示

绑定style样式

要想给style里写font-size为动态数据
可是style="里面为js表达式"表达式不能有font-size:40px

<div :style="{fontSize:f+'px'}"></div>

更好的写法:

<div :style="fontObj"></div>
      data: {
          fontObj:{
            fontSize:40+'px'
          },

注意!!不论是对象里 还是vm模板里都不能写 font-size 要写fontSize
因为 vue实例里的样式对象都是写好的样式名 例如clasObj:{
}里面的属性名 都是自己写好的样式名 所以 fontSize的写法是规定的

条件渲染

隐藏样式 v-show=“false”

v-show
写法：v-show=“表达式”
适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

【备注】使用v-if的时候，元素可能无法获取到，而使用v-show一定可以获取到。

v-if 结构也不存在了

比较v-if与v-show
如果需要频繁切换 v-show 较好
当条件不成立时, v-if 的所有子节点不会解析

v-else和v-else-if

v-if=“表达式”
v-else-if=“表达式”
v-else 不跟表达式 表示前面条件都不符合时
=>相当于

if{
}else if{
}else{}

适用于：
切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

---

重点

若想实现多个盒子在n=1时出现 需要给多个盒子设定v-if

         <div v-if="n===1"></div>
         <div v-if="n===1"></div>
         <div v-if="n===1"></div>

如果给它们外面套个div
外面的div会影响样式

<div v-if="n===1">
<div></div>
<div></div>
<div></div>
</div>

template不会影响样式 只是单纯套个父元素设置v-if 只能v-if 不能v-show

     <template v-if="n===1">
         <div></div>
         <div></div>
         <div></div>
     </template>

总结

v if和 v show的区别
show适用于切换频繁的 它是display none 只是隐藏结构还在 容易被覆盖
if 条件不满足 子节点不会被解析 元素容易获取不到 template模板控制多个元素的样式 只能用if