<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.isRed{
background: red;
}
</style>
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--
这里绑定class属性，
里边是一个表达式，
class的值是isRed，isRed显示与否取决于temp是true还是false
-->
<div
:class="{isRed : temp}"
@click="changeColor"
>hello world;</div>
</div>
<script>
// 生命周期函数就是 Vue实例在某一个时间点自动执行的函数
var vm = new Vue({
el : "#app",
data : {
temp : false
},
methods : {
changeColor : function(){
this.temp = !this.temp;
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.isRed{
background: red;
}
.isGreen{
color: green;
}
</style>
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--
绑定数组，可以写多个变量
-->
<div
:class="[temp, isGreen]"
@click="changeColor"
>hello world;</div>
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
temp : "",
isGreen : "isGreen"
},
methods : {
changeColor : function(){
this.temp = this.temp === 'isRed' ? "" : "isRed";
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.isRed{
background: red;
}
.isGreen{
color: green;
}
</style>
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--
style改变样式
:style="styleObj"
:style="[styleObj, {fontSize:'30px'}]"
-->
<div
:style="[styleObj, {fontSize:'30px'}]"
@click="changeColor"
>hello world;</div>
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
styleObj : {
color : 'red',
background : 'green'
}
},
methods : {
changeColor : function(){
this.styleObj.color = this.styleObj.color==="yellow"?"red":"yellow"
}
}
})
</script>
</body>
</html>
网友评论