通过Vue实现动态类
点击改变按钮大小
用对象方式做变化的按钮
（1）创建文件：右键base——新建文件——起名5-dyna-class.html
（2）bootstrap——3——全局css样式——按钮
（3）引入bootstrap.min.css和vue.js
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/vue.js"></script>
（4）创建个div里面添加个大按钮
<div id="dynClass">
<button type="button" class="btn btn-primary btn-lg">变化的按钮（对象）</button>
</div>
至此已经有了一个按钮但是点击不会变大变小
提示：只要改btn-lg就能实现变大变小，加上就变大，没有就变小
（5）创建vue对象
1.绑定el
2.数据驱动data 把btn-lg属性变成数据，通过设定数据的值达到对class的控制
创建一个数据btnObj：以对象形式进行管理class
btn:true,
‘btn-primary’:true,
‘btn-lg’:true
（每一个属性值就都代表了一个类名）
至此
3.改变btn的true，false后就可以达到变大变小
方法methods{方法名：changeBtnObj}
绑定到按钮上：@click=“changeBtnObj”
至此点击按钮实现变大变小：点击一下变小再点就变大
用数组方式做变化的按钮
1.绑定
2.数据驱动（数组）data：btnArray
3.方法methods：changeBtnArray() 数组里面要是三个就把最后一个移出去，要是两个就加上
用三元运算符方式做变化的按钮
1.使用字符串连接 :class="'btn ’ +'btn-danger '+(isBig ? 'btn-lg ’ : ‘’ )"如果isBig:true就加上’btn-lg ’ 如果等于false就返回空的字符串
2.绑定
3.数据驱动data：取一个布尔类型是值isBig:true
4.加事件methods: @click=“changeBtnTri”
点击改变按钮颜色
思路：把所有颜色放在数组btnClass里，取btnColorArray的颜色弹出去，在数组btnClass中找到当前颜色的索引，找到下一个颜色放btnColorArray里
1.绑定
2.数据驱动（数组）data:btnColorArray
3.方法methods: changeBtnColor()
ref属性获取dom对象实现点击按钮改变颜色
第一步：取到dom对象
1.加事件@click=“changeOneBtn”
2.ref=“oneBtn”
实现：把标签变色的按钮（ref）通过dom形式取出来
第二步：实现改变颜色（两种颜色的改变）
1.引入jQuery
2.if语句
实现点击按钮变色
5-dyna-class.html所有代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/vue.js"></script>
<script src="js/jquery-3.6.0.js"></script>
<title>Document</title>
</head>
<body>
<div id="dynClass">
<button type="button" :class="btnObj" @click="changeBtnObj">变化的按钮（对象）</button>
<button type="button" :class="btnArray" @click="changeBtnArray">变化的按钮（数组）</button>
<button type="button" :class="'btn ' +'btn-danger '+(isBig ? 'btn-lg ' : '' )" @click="changeBtnTri">变化的按钮（三元运算符）</button>
<button type="button" :class="btnColorArray" @click="changeBtnColor">变色的按钮</button>
<button type="button" :class="btnColorArray" @click="changeOneBtn" ref="oneBtn" >变色的按钮(ref)</button>
</div>
<script>
new Vue({
el: "#dynClass",
data: {
btnObj: {
btn: true,
'btn-primary': true,
'btn-lg': true
},
btnArray: ['btn', 'btn-success', 'btn-lg'],
isBig:true,
btnColorArray:['btn','btn-primary']
},
methods: {
changeBtnObj() {
this.btnObj['btn-lg'] = !this.btnObj['btn-lg'];
},
changeBtnArray() {
if (this.btnArray.length == 2) {
this.btnArray.push('btn-lg');
} else {
this.btnArray.pop('btn-lg');
}
},
changeBtnTri(){
this.isBig = !this.isBig;
},
changeBtnColor(){
//可选颜色的class数组
var btnClass = ['btn-default','btn-primary','btn-success','btn-info','btn-warning','btn-danger'];
//取出当前按钮的颜色类
var currCls = this.btnColorArray.pop();
//在数组中查找当前的颜色类值
var index = btnClass.indexOf(currCls);
//获取下标的下一个值并放到btnColorArray:更改颜色
index++;
if(index == btnClass.length){
index = 0;
}
this.btnColorArray.push(btnClass[index]);
},
changeOneBtn(){
//获取dom对象现在的btn是个dom
var btn = this.$refs.oneBtn;
//console.log(btn.innerHTML);
if($(btn).hasClass('btn-default')){
$(btn).removeClass('btn-default');
$(btn).addClass('btn-success');
}else{
$(btn).removeClass('btn-success');
$(btn).addClass('btn-default');
}
}
}
})
</script>
</body>
</html>
通过Vue动态控制样式
点击改变按钮颜色
用对象表示颜色
（1）创建文件：右键base——新建文件——起名6-dyna-style.html
（2）先写个静态页面
效果（图1）：
（3）创建vue对象
1.绑定el
2.数据驱动data ：用对象表示
把样式放到对象styleObj里
效果如图1
用数组表示颜色
数组里面是对象
数组[对象{样式：值}]
写法1：
把样式放到数组styleArray里
写法2：
效果如图1
在写法2基础上实现改变颜色/宽/高
把color/width/height作为数据拿出来
效果如图1
加事件设置点击蓝色变大
6-dyna-style.html所有代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/vue.js"></script>
<title>动态样式</title>
</head>
<body>
<div id="dynStyle">
<div :style="styleObj"></div>
<div :style="styleArray"></div>
<div :style="{width: width + 'px', height: height + 'px', backgroundColor: color}" @click="changeBig"></div>
</div>
<script>
new Vue({
el: "#dynStyle",
data: {
styleObj: {
width: '200px',
height: '200px',
backgroundColor: 'red'
},
styleArray:[{width: '200px'}, {height: '200px'}, {backgroundColor: 'green'}],
color: 'blue',
width: 200,
height: 200
},
methods: {
changeBig() {
this.width += 50;
this.height += 50;
}
}
})
</script>
</body>
</html>
事件处理
（1）创建文件：右键base——新建文件——起名7-event.html
（2）引入bootstrap.min.css和vue.js
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/vue.js"></script>
（3）bootstrap——3——组件——面板
（4）bootstrap——3——全局css样式——按钮
（4）写了两个事件：panelClick，btnClick
事件发生透传（穿透）：子标签元素有事件，父标签也有事件。子标签被点击之后父标签也会触发。
点击按钮出现
点击确定出现
阻止透传：
效果：点击按钮仅显示我是按钮，点击确定不显示我是面板
阻止透传更优雅的写法：
点击面板只弹出一次：通过修饰符once
设置组合键：只有点击alt+a才触发
注意：
change事件得失去焦点才触发
input事件输入时候就能触发