本文详细介绍了Vue中关于样式的使用，包括style样式、class、vue书写样式、v-show和v-if的用法及区别，以及v-if&v-else-if&v-else的结构。此外，还讲解了事件处理，如v-on的事件绑定和事件对象的使用，最后进行了总结，强调了v-show、v-if的选择使用原则和事件处理的特点。
目录
一、样式
（一）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 进行隐藏与显示的
3: 节点通过v-show指令操作时,无论是true或false,渲染页面时也会将节点渲染
4: 隐藏显示多个节点可以使用卸载它们的父级
示例：
<div id="app">
<div v-show="bol"> //给谁设置，里面的元素都会被隐藏（或显示）
<p >{{name}}</p>
<p>{{age}}</p>
</div>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
bol:false,
name:"pxr",
age:18,
}
})
</script>
（五）v-if
v-if="表达式" 控制元素隐藏与显示
1: 表达式 为'false'表示隐藏，为' true'表示显示
2: v-if是vue通过进行直接删除节点与重新创建添加
3: 节点通过v-if指令操作时,为true渲染页面时会渲染,为false直接不管
4: 隐藏显示多个节点可以使用卸载它们的父级
示例：
<div id="app">
<div v-if="bol"> //给谁设置，里面的元素都会被隐藏（或显示）
<p >{{name}}</p>
<p>{{age}}</p>
</div>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
bol:false,
name:"pxr",
age:18,
}
})
</script>
（六）v-show和v-if的区别
区别：
A: v-show是vue通过 display:none 进行隐藏与显示的
B: v-if是vue通过进行直接删除节点与重新创建添加,
C: 使用场景
1. 频繁的切换使用 v-show
2. 简单切换使用 v-if
（七）v-if&v-else-if&v-else
A: v-if="表达式"
B: v-if="表达式" v-else
C: v-if="表达式" v-else-if="" v-else=""
分别对应'if(){...}' 'if(){...} else {...}' 'if() {...} else if() {...} else {...}'
注意！！
使用时中间不能进行断开
示例：
<div id="app">
<p v-if="bol">{{name}}</p>
<p v-else-if="bol1">{{age}}</p>
<p v-else>{{sex}}</p>
//这三个是连在一起的，中间不能有其他标签，否则会失效
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
bol:true,
bol1:false,
name:"pxr",
age:18,
sex:"nba"
},
})
</script>
二、事件
（一）v-on
事件
1. v-on指令绑定事件 v-on:事件名="事件函数" 简写 @事件名="事件函数"
2. 事件函数需要写在vue配置选项methods中
3. 事件函数的this执行vue实例, 是由vue做了处理的this
4. 事件绑定的="表达式" 表示可以写一些简单的代码
示例：
<button @click="handleClick">点击触发</button>
let vm = new Vue({
el:"#app",
// 存储数据位置
data:{
name:"pxr",
age:18,
sex:"nba"
},
// 存储函数位置
methods:{
handleClick(){
console.log("函数触发",this,this.name);
this.name= "啦啦啦"
}
}
})
（二）事件对象
事件对象event
1. 事件函数未传递参数,设置形参直接接收event
2. 事件函数传递参数,实参中设置一项$event,形参设置对应位置接收
设置多个事件 事件函数需要时执行状态
<button @click="handleClick(1,$event,66),add()" >点击触发</button>
三、总结
1. v-show v-if 设置元素隐藏显示
A. v-if 直接进行直接删除和添加来隐藏显示;
B. v-show 通过display:none来隐藏和显示的
C. vue初始化渲染时 v-show无论是true还是false都会进行渲染节点
D. vue初始化渲染时 v-if是true进行渲染节点,是false不会渲染节点
后续操作if隐藏显示,是进行销毁与创建
2. v-if="" v-else-if="" v-else
A. 中间不能断开
3. v-bind:class="" v-bind:style={color:red}
A. 一个绑类名 一个绑样式
B. 它们是动态的,如果你使用静态那是原生css方法即可,
C. 动态值会自动去data中进行查找
D. 样式名要小驼峰写法
E. 简写 :属性名
4. v-on:事件名="事件函数" 简写 @事件名="事件函数"
A. 事件函数需要写在vue配置选项methods中
B. 事件函数this指向Vue实例
C. 事件对象传递,
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
