VUE---6.样式&事件

目录

一、样式

（一）style样式

（二）class

（三）vue书写样式

 （四）v-show

 （五）v-if

 （六）v-show和v-if的区别

（七）v-if&v-else-if&v-else

 二、事件

（一）v-on

（二）事件对象 

三、总结

---

一、样式

（一）style样式

vue书写css样式语法是和css一样的;

动态的css样式

        A: v-bind:样式名="样式值"  简写 :样式名="样式值"

            1. 样式值是一个变量会自动查找data中的属性

            2. 复合样式名是小驼峰写法

            3. 样式全部写在data中

            示列:

                <p class="box" :style="{color:'green',backgroundColor:a}"></p>

        补充

            ' " " '  双单引号的包裹 =>单包双 双包单

（二）class

vue书写css样式  => class名称 => v-bind

        动态绑定之后会到data中进行查找

        A:  v-bind:class="属性名" 简写 :class="属性名" 绑定class名称

        B:  表达式选择对应class名    :class=" bol ? 'box1' : 'box'

        C:  绑定多个calss名称        :class="[box,qwe]"

            示列:

                <p :class="box" ></p>

                <p :class=" bol ? 'box1' : 'box' " ></p>

                <span :class="[box,qwe]">二玲子</span>

（三）vue书写样式

        1. 可以使用原生的class写法

        2. 通过vue语法进行绑定样式书写行内css样式

        3. 通过vue语法进行绑定class名书写css样式

    使用场景:

        想要样式发生变化就可以使用vue绑定方式;不需要进行任何的更新那就使用原生即可

 （四）v-show

 v-show="表达式"   控制元素隐藏与显示

            1: 表达式为’false'表示隐藏 ，为'true'表示显示

            2: v-show是vue通过 display:none 进行隐藏与