vue中的样式绑定例子
2018-07-10 本文已影响0人
程序员同行者
vue中的样式绑定例子
<!DOCTYPE html>
<html>
<head>
<title>vue中的样式绑定</title>
<script src="./vue.js"></script>
<style>
.activated {
color: red
}
</style>
</head>
<body>
<div id='app'>
<!-- //写法一 -->
<div @click='handleDivClick'
:class="{activated: isActivated}"
>
Hello World
</div>
</div>
<div id='app-1'>
<!-- //写法二 -->
<!-- :class="[activated] 可以写成数组的方式 ，可以有多个-->
<div @click='handleClassClick'
:class="[activated,activatedOne]"
>
Hello World1
</div>
</div>
<div id='app-2'>
<!-- 这里可以写成数组的方式，也可以直接写对象表达式 -->
<!-- 写法一 :style="styleObj" -->
<!-- 写法二 :style="[styleObj, {fontSize: '20px'}]" -->
<div @click='handlestyleClick'
:style="[styleObj, {fontSize: '20px'}]"
>
Hello World2
</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data: {
isActivated :false
},
methods:{
handleDivClick: function() {
console.log(this.isActivated);
this.isActivated = !this.isActivated;
}
}
})
var vm1 = new Vue({
el:'#app-1',
data: {
activated: "",
activatedOne: "activated-one"
},
methods: {
handleClassClick:function() {
this.activated = this.activated ==="activated" ? "" : "activated";
}
}
})
var vm2 = new Vue({
el: '#app-2',
data: {
styleObj:{
color: "black"
}
},
methods:{
handlestyleClick: function(){
this.styleObj.color = this.styleObj.color === "black" ? "red" : "black";
}
}
})
</script>
</body>
</html>
