Vue(4)操作class 和样式 v-if show for

首先是class，有多种操作方法，因为它是标签的属性，所以我们需要用v-bind进行绑定

方法一

<div :class="{ active: isActive }"></div>

<script >
    export default{
       data(){
        return{
              username:"绘梨衣",
              active:true      
    }
   }
    }

        
</script>
<template>
    <div>
     <p  :class="{a:active,b:active}"  class="aa"  >{{ username }}</p>
</div>
</template>

<style scoped>
.a{
    font-size: 60px;
}
.b{
    color: rgb(199, 140, 184);
}
.aa{
    background-color: aqua;
}
</style>

通过后端传来的true  or  false来选择是否使用该class 并且class里面的可以叠加

记录这一种即可

绑定style

  <p        :style="{color:'pink',fontSize:'30px'}"           >{{ username }}</p>

当过多的时候我们可以返回值

       s:{

                color:'pink',fontSize:'30px'

              }

             

通过后端返回值来改变  当然我不觉得这是一种好办法

请注意写的时候必须要对css的属性添加  ‘  ’   <---单引号

---

---

---

v-if

     <p          v-if="byname == '小小怪兽'   "          :style="s"           >{{ username }}</p>

 v-if会选择true的渲染

v-show会渲染，然后选择true的进行展示

    <p          v-show="true"          :style="s"           >{{ username }}</p>

v-for

     <ul  >

                <li  v-for="item in name" >{{item}}</li>

             </ul>

会将数组中的渲染出来  注意要绑定 :key="item  ---防止错乱

        this.name.push("凯撒")   通过提供的数组方法可以响应性的增加数组元素