<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#orange {
width: 200px;
height: 200px;
background: orange;
}
#red {
width: 100px;
height: 100px;
background: red;
}
.aa {
width: 200px;
height: 200px;
background: aqua;
}
.bb {
color: red;
}
</style>
</head>
<body>
<div id="app">
<button @click="change">change</button>
<!-- v-bind 动态绑定属性 -->
<div v-bind:id="myName"></div>
<!-- <div v-bind:id="color"></div> -->
<div :id="color"></div>
<div :class="{aa:isA,bb:isB}">1111</div>
<div :class="[flag?class1:'',class2]">222</div>
<!-- <div style="width: 300px;height: 300px;background: #000;"></div> -->
<div :style="{color: color1}" :class="class1">333</div>
<div :style="[s1,s2]">xixixixxixixii</div>
</div>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
myName: 'zs',
color: 'orange',
isA: true,
isB: true,
flag: true,
class1: 'aa',
class2: 'bb',
color1: 'green',
s1: {
width: '100px',
height: '100px',
background: 'black'
},
s2: {
color: 'red'
}
},
methods: {
change() {
this.myName = 'lisi'
this.color = 'red'
}
}
})
</script>
</body>
</html>