12-Vue核心-绑定样式
class 与 style 绑定
1）在应用界面中，某个（些）元素的样式是变化的
2）class / style 绑定就是专门用来实现动态样式效果的技术
class 绑定样式
写法：
v-bind:class = "xxx" 或 :class = "xxx" ，xxx 可以是字符串、对象、数组
1）字符串写法适用于：只绑定一个样式，类名不确定，需要动态获取
2）数组写法适用于：要绑定多个样式，个数不确定，名字也不确定
3）对象写法适用于：要绑定多个样式，个数确定，名字也确定，但需要动态确定用不用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绑定样式</title>
<style>
.basic{
width: 300px;
height: 50px;
border: 1px solid black;
}
.happy{
border: 3px solid red;
/* rgba() 函数使用红(R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色 */
background-color: rgba(255,255,0,0.644);
/* linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片 */
background: linear-gradient(30deg,yellow,pink,orange,yellow);
}
.sad{
border: 4px dashed rgb(2,197,2);
background-color: skyblue;
}
.normal{
background-color: #bfa;
}
.malingshu1{
background-color: yellowgreen;
}
.malingshu2{
font-size: 20px;
/* text-shadow 为文字添加阴影 */
text-shadow: 2px 2px 10px red;
}
.malingshu3{
/* border-radius 设置外边框圆角 */
border-radius: 20px;
}
</style>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<!-- 绑定class样式 字符串写法，适用于：要绑定的样式个数确定，但类名不确定，需要动态指定 -->
<!-- 需求：点击div，使类名"basic"随机改变为"happy"、"sad"和"normal"其中的一种 -->
<div class="basic" :class="mood" @click="changeMood">{{name}}</div><br/>
<!-- 绑定class样式 数组写法，适用于：要绑定的样式个数不确定、类名也不确定 -->
<!-- 需求：可以通过Vue动态修改class的类名，["happy","sad","normal"]-->
<div class="basic" :class="classArr">{{name}}</div><br/>
<!-- 绑定class样式 对象写法，适用于：要绑定的样式个数确定、类名也确定，但要动态决定用不用 -->
<!-- 需求：可以通过Vue动态修改class的类名，带有"malingshu1"和"malingshu2"的组合形式 -->
<div class="basic" :class="classObj">{{name}}</div><br/>
</div>
<script type="text/javascript">
// 阻止 vue 在启动时生成生产提示
Vue.config.productionTip = false
const vm = new Vue({
el:"#root",
data(){
return{
name:"马铃薯",
mood:"normal",
classArr:["happy","sad","normal"],
classObj:{
malingshu1:true,
malingshu2:false
}
}
},
methods:{
changeMood(){
const arr = ["happy","sad","normal"]
// Math.random():获取[0,1)的随机数
// Math.floor() 向下取整 Math.ceil() 向上取整 Math.round() 四舍五入的取整
const index = Math.floor(Math.random()*3)
this.mood = arr[index]
},
}
})
</script>
</body>
</html>
style绑定样式
写法：
1）对象写法：v-bind:style = "{fontSize:xxx}" 或 :style = "{fontSize:xxx}" ，其中 xxx 是动态值
2）数组写法：v-bind:style = "[a,b]" 或 :style = "[a,b]" ，其中 a、b是样式对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>style绑定样式</title>
<style>
.basic{
width: 300px;
height: 50px;
border: 1px solid black;
}
.happy{
border: 3px solid red;
/* rgba() 函数使用红(R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色 */
background-color: rgba(255,255,0,0.644);
/* linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片 */
background: linear-gradient(30deg,yellow,pink,orange,yellow);
}
.sad{
border: 4px dashed rgb(2,197,2);
background-color: skyblue;
}
.normal{
background-color: #bfa;
}
.malingshu1{
background-color: yellowgreen;
}
.malingshu2{
font-size: 20px;
/* text-shadow 为文字添加阴影 */
text-shadow: 2px 2px 10px red;
}
.malingshu3{
/* border-radius 设置外边框圆角 */
border-radius: 20px;
}
</style>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<!-- 绑定style样式 对象写法 -->
<div class="basic" :style="styleObj">{{name}}</div><br/>
<!-- 绑定style样式 数组写法 -->
<div class="basic" :style="styleArr">{{name}}</div>
</div>
<script type="text/javascript">
// 阻止 vue 在启动时生成生产提示
Vue.config.productionTip = false
const vm = new Vue({
el:"#root",
data(){
return{
name:"马铃薯",
mood:"normal",
styleObj:{
// 属性名不能乱写，一定要是style里面有的
backgroundColor: "red",
fontSize: "40px",
color: "yellow"
},
styleArr: [
{
fontSize: "40px",
color: "blue"
},
{
backgroundColor: "gray"
}
]
}
},
methods:{
changeMood(){
const arr = ["happy","sad","normal"]
// Math.random():获取[0,1)的随机数
// Math.floor() 向下取整 Math.ceil() 向上取整 Math.round() 四舍五入的取整
const index = Math.floor(Math.random()*3)
this.mood = arr[index]
},
}
})
</script>
</body>
</html>
