【Vue框架】Vue绑定样式及案例之行内样式——对象绑定样式与数组控制样式（附带源码案例)
文章目录
- 一、Vue样式绑定
- 1.1 Vue绑定class样式
- 1.2 Vue绑定行内样式
- 1.2.1 对象控制绑定样式
- 1.2.2 数组控制绑定样式
- 1.3 Vue绑定样式案例(标题排他)
- 1.4 v-if和v-show指令
- 1.5 v-if实现选项卡案例
- 1.6 购物车实例
一、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); // 打印出: true
if(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>