<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<style>
.demo{
width: 100px;
height: 100px;
border: 1px solid black;
}
.style1{
width: 100px;
height: 100px;
background-color: red;
}
.style2{
width: 100px;
height: 100px;
background-color: yellow;
}
.style3{
width: 100px;
height: 100px;
background-color: blue;
}
.type1{
font-size:30px;
}
.type2{
font-weight: bold;
}
.type3{
color: blueviolet;
}
</style>
<body>
<!-- vue绑定class样式,变化的样式用v-bind来写 -->
<!-- 第一种字符串形式绑定 -->
<!-- <div id="app" class="demo" :class="mood" @click="myfunction">测试</div> -->
<!-- 2、用数组形式绑定 -->
<!-- <div id="app" class="demo" :class="arr" @click="myfunction">测试</div> -->
<!-- 3、用对象形式绑定 -->
<!-- <div id="app" class="demo" :class="obj" @click="myfunction">测试</div> -->
<!-- vue绑定style样式 -->
<!-- 1、以对象形式绑定 -->
<div id="app" class="demo" :style="Arr" @click="myfunction">测试</div>
<!-- 2、以数组形式绑定 -->
<script>
new Vue({
el:'#app',
data:{
mood:'style1',
arr : ["type1" ,"type2" , "type3"],
obj:{
type1:true,
type2:false,
type3:true,
},
form:{
backgroundColor:'blue'
},
form2:{
color:'red'
},
Arr:[
{
backgroundColor:'blue'
},
{
color:'red'
}]
},
methods:{
//点击div变换指定颜色
// myfunction(){
// return this.mood = 'style2'
// }
//随机3种颜色变化
// Math.floor()向下取整 Math.random随机生成0-1的数生成不到1
myfunction(){
const arr = ["style1" , "style2" , "style3"]
const index = Math.floor(Math.random()*3);
return this.mood = arr[index]
}
}
})
</script>
</body>
</html>
vue绑定class样式
最新推荐文章于 2024-05-15 18:02:14 发布