<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/Vue.js"></script>
</head>
<style>
.aClass{
color: red;
}
.bClass{
color: blue;
}
.cClass{
font-size: 30px;
}
</style>
<body>
<div id="app">
<!--绑定字符床-->
<p :class="a" class="cClass">Hello Vue!</p>
<!--绑定对象-->
<p :class="{aClass:true,bClass:false}">Hello Vue!</p>
<!--绑定数组-->
<p :class="['bClass','cClass']">Hello Vue!</p>
<!--绑定style-->
<p :style="{color:color,fontSize:fontSize}">Hello Vue!</p>
<button @click="update()">修改</button>
<p v-show="false">123456</p>
</div>
<script>
new Vue({
el:'#app',
data:{
a:'aClass',
color:'yellow',
fontSize:'50px'
},
methods:{
update(){
this.a = 'bClass'
this.color = 'black'
this.fontSize = '10px'
}
}
})
</script>
</body>
</html>
Vue学习笔记6———样式绑定
猜你喜欢
转载自blog.csdn.net/progammer10086/article/details/85835600
今日推荐
周排行