class对象语法
<标签 :class="{class名称：布尔值}"></标签>
点第几个让第几个红
<!DOCTYPE html>
<html lang="zh">
<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>动态样式绑定</title>
<style>
.active{
color:red;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in stuList" :class="{active:currentIndex==index}" @click="currentIndex=index" >
{{index}}---{{item}}
</li>
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
flag:false,
currentIndex:-1,
stuList:["张三","李四","王五"],
},
});
</script>
</html>
class数组语法
<标签 :class="[条件是否成立？‘样式一’：‘样式二’]"></标签>
<!DOCTYPE html>
<html lang="zh">
<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>动态样式绑定</title>
<style>
.active {
color: red;
}
</style>
<!-- 我希望点击一下这个文字，就让它变红 -->
</head>
<body>
<div id="app">
<h2 :class="[true?'active':null]">标哥哥非常帅</h2>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
flag:false
},
})
</script>
</html>
点击就亮
<!DOCTYPE html>
<html lang="zh">
<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>动态样式绑定</title>
<style>
.active {
color: red;
}
</style>
<!-- 我希望点击一下这个文字，就让它变红 -->
</head>
<body>
<div id="app">
<h2 :class="[flag?'active':null]" @click="flag=true">标哥哥非常帅</h2>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
flag:false
},
})
</script>
</html>
两种语法实现红蓝来回切换
<!DOCTYPE html>
<html lang="zh">
<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>动态样式绑定</title>
<style>
.red {
color: red;
}
.blue{
color:blue;
}
</style>
</head>
<body>
<div id="app">
<!-- 对象语法 -->
<h2 :class="{red:flag,blue:!flag}" @click="flag=!flag">标哥哥非常帅</h2>
<!-- 数组语法 -->
<h2 :class="[flag?'red':'blue']" @click="flag=!flag">标哥哥非常帅</h2>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
flag:true
},
})
</script>
</html>
style动态样式绑定
语法格式
<标签 :style="{css属性名：css属性值}"></标签>
<!DOCTYPE html>
<html lang="zh">
<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>动态样式绑定</title>
<style>
.box{
width:100px;
height:100px;
border:2px solid black;
}
</style>
</head>
<body>
<div id="app">
<!-- 输入框里面输入一个数值，则下面点正方形就有多大 -->
<input type="text" v-model="x">
<hr/>
<div class="box" :style="{width:x+'px',height:x+'px'}"></div>
<br/>
<div class="box" :style="{width:xx}"></div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
x:100
},
computed:{
xx:function(){
return this.x+"px";
}
}
})
</script>
</html>
<!-- 要求
选中上面的某一个颜色，下面盒子里面的文字颜色就要改变
-->
<!DOCTYPE html>
<html lang="zh">
<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>动态样式绑定</title>
<style>
.box{
width: 200px;
height: 100px;
font-size: 32px;
border: 2px solid black;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="app">
<select v-model="x">
<option value="red">红色</option>
<option value="blue">蓝色</option>
<option value="yellow">黄色</option>
<option value="pink">粉色</option>
</select>
<hr>
<div class="box" :style="{color:x}">
标哥哥很帅
</div>
<!-- 要求
选中上面的某一个颜色，下面盒子里面的文字颜色就要改变
-->
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
new Vue({
el:"#app",
data:{
x:"red"
}
})
</script>
</html>
在动态样式绑定里，如果样式名或属性名出现-横线，则去掉横线，横线后面的首字母大写，如background-color写成 backgroundColor
<!DOCTYPE html>
<html lang="zh">
<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>动态样式绑定</title>
<style>
.box{
width: 200px;
height: 100px;
font-size: 32px;
border: 2px solid black;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="app">
<select v-model="x">
<option value="red">红色</option>
<option value="blue">蓝色</option>
<option value="yellow">黄色</option>
<option value="pink">粉色</option>
</select>
<hr>
<div class="box" :style="{backgroundColor:x}">
标哥哥很帅
</div>
<!-- 要求
选中上面的某一个颜色，下面盒子里面的文字颜色就要改变
-->
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
new Vue({
el:"#app",
data:{
x:"red"
}
})
</script>
</html>
style数组语法用法有限，更多情况使用对象语法