Vue的样式绑定
程序员文章站
2022-07-04 19:32:55
...
Vue的样式绑定分为
直接class绑定对象
class绑定数组
style直接绑定属性
style绑定数组
<!DOCTYPE html>
<html>
<head>
<title>Vue样式</title>
<script type="text/javascript" src="vue.js"></script>
<style type="text/css">
.active{
color: red
}
</style>
</head>
<body>
<div id="app">
<!-- <div :class="{active:isActive}" @click="handleClick">
你好
</div> -->
<!-- 数组的形式 -->
<div :class = "[active]" @click="handleClick">你好</div>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data(){
return{
//isActive:false
active:""
}
},
methods:{
handleClick:function(){
//动态切换颜色
//this.isActive = !this.isActive
this.active = this.active=="active"?"":"active"
}
}
})
</script>
</html>
style直接绑定
<!DOCTYPE html>
<html>
<head>
<title>Vue样式</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- <div :style="{style}" @click="handleClick">
你好
</div> -->
<!-- 数组的形式 -->
<div :style = "[style]" @click="handleClick">你好</div>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data(){
return{
//isActive:false
//以数组的形式，则可以定义多个样式
style:{
color:"red"
}
}
},
methods:{
handleClick:function(){
//this.isActive = !this.isActive
// this.active = "active"
//this.active = this.active=='active'?"":"active"
this.style.color = this.style.color=="black"?"red":"black"
}
}
})
</script>
</html>
上一篇： Vue的样式绑定
下一篇： Vue-记事本综合案例