app.js
new Vue({
el:"#vue-app",
data:{
changeColor:true,
changeLength:true,
},
methods:{
},
computed:{
shenqi:function () {
return{
changeColor:this.changeColor,
changeLength:this.changeLength,
}
}
}
})
Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="vue-app">
<button v-on:click="changeColor = !changeColor">change color</button>
<button v-on:click="changeLength = !changeLength">change Length</button>
<div v-bind:class="shenqi">
<span>Hello World</span>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
css
.changeColor{
background: red;
}
.changeLength{
height: 500px;
}
