【Vue框架】Vue绑定样式及案例之行内样式——对象绑定样式与数组控制样式（附带源码案例)
文章目录
一、Vue样式绑定
1.1 Vue绑定class样式
Vue通过v-bind动态样式绑定。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.a1{color: red;}.a2{font-size: 50px;}.a3{background: #dbdbdb;}</style>
</head><body><div id="app" v-cloak><h1 class="a1 a2 a3">Hello Vue</h1><div :class= "{a1:true, a2:true, a3:istrue}"><h1> Hello Vue </h1></div><h1 :class= "['a1','a2','a3']">Hello Vue</h1></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var vm = new Vue({el: '#app',data: {istrue:true,}})</script>
</body>
</html>
1.2 Vue绑定行内样式
1.2.1 对象控制绑定样式
- 行内动态样式
- 1、动态style样式属性需要加引号,否则变为变量
- 2、属性名称不能包含“-”,需要将中间首字母变为大写 如: font-size => fontSize
1.2.2 数组控制绑定样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.a1{color: red;}.a2{font-size: 50px;}.a3{background: #dbdbdb;}</style>
</head><body><div id="app"><!--对象控制绑定样式行内动态样式:1.动态style样式属性需要加引号,否则变为变量2.属性名称不能包含“-”,需要将中间首字母变为大写 如:font-size => fontSize--><h1 :style="{color:'red', fontSize:'50px'}">Hello Vue</h1><!-- 数组控制绑定样式 --><h2 :style="[redColor, fSize]">Hello Vue</h2></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var vm = new Vue({el: '#app',data: {istrue:true,redColor:{color:'red'},fSize:{fontSize:'60px'}}})</script></body>
</html>
1.3 Vue绑定样式案例(标题排他)
<!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"><title>Document</title><style>.redColor{color: red;}</style>
</head><body><div id="app"><span :class="{redColor:isRed==0}" @click="f1(0)">首页</span><span :class="{redColor:isRed==1}" @click="f1(1)">新闻中心</span><span :class="{redColor:isRed==2}" @click="f1(2)">产品中心</span></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var vm = new Vue({el: '#app',data: {isRed:1},methods:{f1(i){console.log(i);this.isRed = i;}},})</script>
</body>
</html>
1.4 v-if和v-show指令
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.a1{color: red;}.a2{font-size: 50px;}.a3{background: #dbdbdb;}</style>
</head><body><div id="app" v-cloak><h1 v-if="flag">Hello Vue</h1><h1 v-show="flag">Hello Vue</h1><button @click="toggle">点击</button><h1 v-if="type=='A'">A</h1><h1 v-else-if="type=='B'">B</h1><h1 v-else>其他元素</h1></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var vm = new Vue({el: '#app',data: {flag:true,type:'C'},methods:{toggle(){this.flag = !this.flag;}}})</script>
</body>
</html>
1.5 v-if实现选项卡案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.redColor{color:red;}</style>
</head><body><div id="app"><span :class="{redColor:active==0}" @click="btn(0)">登录</span><span :class="{redColor:active==1}" @click="btn(1)">注册</span><div v-if="active==0">登录内容</div><div v-if="active==1">注册内容</div></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var vm = new Vue({el: '#app',data: {active:1},methods:{btn(i){this.active = i;}}})</script>
</body>
</html>
1.6 购物车实例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{margin: 0px; padding: 0px;}#app{width: 100%; max-width: 750px; margin: 0 auto; overflow: hidden; }.top{width: 100%; max-width: 750px; height: 50px; background: #0094ff; color: white;display: flex; align-items: center;justify-content: center;}img{width: 100px;}table tr td{border-bottom: 1px solid #dbdbdb; text-align: center;}.t1{width: 30px; text-align: center;}.footer{width: 100%; max-width: 750px; height: 50px;background: #0094ff; color: white;position: fixed; bottom: 0; line-height: 50px;}.footer i{font-style: normal; padding-left: 50px; }</style></head><body><div id="app" v-cloak><div class="top">购物车</div><table width="100%" cellpadding="5" cellspacing="0"><tr v-for="(item,i) in cartList" :key="i"><td v-if="item.check"><input type="checkbox" checked @click="checkBtn(i)"/></td><td v-else ><input type="checkbox" @click="checkBtn(i)" /></td><td><img :src="item.imgUrl"/></td><td>名称:{{item.title}}<br/>价格:{{item.price}}</td><td><button @click="btnSub(i)">-</button><input type="text" class="t1" :value="item.num"/><button @click="btnAdd(i)">+</button></td></tr></table><div class="footer"><em v-if="allCheck == cartList.length" ><input type="checkbox" checked @click="allBtn" />全选</em><em v-else ><input type="checkbox" @click="allBtn" />全选</em><i>总数量:{{allNum}}</i><i>总价格:{{allPrice}}</i></div></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var vm = new Vue({el: '#app',data: {//记录选中的总条数allCheck:0,// 获取产品总价格allPrice:0,//选中的总数量allNum:0,msg:'Hello World',cartList:[{id:1,imgUrl:"../images/p1.jpg",title:'瓜子',price:20,num:1,check:false},{id:2,imgUrl:"../images/p1.jpg",title:'花生',price:30,num:1,check:false},{id:3,imgUrl:"../images/p1.jpg",title:'西瓜子',price:40,num:1,check:false},]},methods:{// 数量加减功能btnSub(i){if(this.cartList[i].num < 1){return}this.cartList[i].num -= 1;this.getAllPrice();this.getAllNum();},btnAdd(i){if(this.cartList[i].num == 5){return}this.cartList[i].num += 1;this.getAllPrice();this.getAllNum();},// 底部全选功能allBtn(e){console.log(e.target); // 打印出: <input type="checkbox"/>console.log(e.target.checked); // 打印出: trueif(e.target.checked){for(var i=0; i<this.cartList.length; i++){this.cartList[i].check = true;}}else{for(var i=0; i<this.cartList.length; i++){this.cartList[i].check = false;}}this.getAllPrice();this.getAllNum();},// 判断是否全选getAllCheck(){var num = 0;for(var i=0; i<this.cartList.length; i++){if(this.cartList[i].check){num ++;}}this.allCheck = num;},//0.获取产品总价格getAllPrice(){var num = 0;for(var i=0; i<this.cartList.length; i++){if(this.cartList[i].check){num += parseInt(this.cartList[i].num) * parseInt(this.cartList[i].price);}}this.allPrice = num;},//1.获取选中总数量getAllNum(){var num = 0;for(var i=0; i<this.cartList.length; i++){if(this.cartList[i].check){num += parseInt(this.cartList[i].num);}}this.allNum =num;},//2.修改产品的选中状态checkBtn(i){console.log(this.cartList[i]);this.cartList[i].check = !this.cartList[i].check;// 获取总数量this.getAllNum();// 获取总价格this.getAllPrice();// 获取选中个数this.getAllCheck();},}})</script></body>
</html>
