Vue入门详解之绑定class和style样式
Vue入门详解之绑定class和style样式
十月梦想
发布于 2018-10-09 15:17:25
发布于 2018-10-09 15:17:25
代码可运行
运行总次数：0
代码可运行
绑定class
绑定class两种方式第一使用对象方式,第二使用数组方式进行绑定
对象方式
<style>
*{
padding:0;
margin: 0;
}
.actived{
color:hotpink;
}
</style>
</head>
<body>
<div id="app">
<h1 :class="{actived:isActive}" @click="getCor">{{msg}}</h1>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
isActive:false,
msg:"十月梦想"
},
mounted:function(){
console.log(this)
},
methods:{
getCor:function (){
this.isActive=!this.isActive
}
}
})
</script>如果isActive为真这绑定这个activedclass,我们绑定了一个click事件,点击后改变这个isClick取值,我们在style中定义了这个.actived的颜色可以使用不同class显示不同颜色!除了对象方式还有其他方式绑定吗?当然有!
数组方式
除了上述的对象方式绑定,还有一种就是数字方式绑定,我们只看关键的vue代码
var app=new Vue({
el:"#app",
data:{
cls1:"btn",
cls2:"btn-lg",
cls3:"col-md",
actived:"actived",
isActive:false,
msg:"十月梦想"
},
mounted:function(){
console.log(this)
},
methods:{
getCor:function (){
this.isActive=!this.isActive
}
}
})对代码简单解析,和对象方式不太一样,这个数组绑定可以传入多个,这个属性来自vue实例中的data,也可以传入一个三木运算符!
直接绑定style样式
上面通过两种方式绑定了class,间接改变了css样式!我们能否直接去改变这个style样式呢?答案当然是可行的!
其实绑定style样式,也是可以通过数组和对象两种方式绑定的!
对象方式
<div id="app">
<h2 :style="{color:cor,fz:mfz}">{{msg2}}</h2>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
cls1:"btn",
cls2:"btn-lg",
cls3:"col-md",
cor:"green",
mfz:"22px",
msg2:"十月OctDream"
},
mounted:function(){
console.log(this)
},
methods:{
getCor:function (){
this.isActive=!this.isActive
}
}
}):style直接绑定,对象内的属性来自data,data对象的属性是css属性值!还有一种直接通过数组绑定样式!
数组方式
<h2 :style="[css1,css2]">{{msg2}}</h2>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
css1:{
fontSize:"58px",
},
css2:{
color:"purple"
},
cls1:"btn",
cls2:"btn-lg",
cls3:"col-md",
cor:"green",
mfz:"22px",
actived:"actived",
isActive:false,
msg:"十月梦想",
msg2:"十月OctDream"
},
mounted:function(){
console.log(this)
},
methods:{
getCor:function (){
this.isActive=!this.isActive
}
}
})
</script>可以直接在一个标签绑定多个属性对象,这个属性定义在data中,每个对象写CSS样式,但是比如font-size形式改为驼峰法fontSize:"20px",等,如果是字符串需要定义在引号中!
这样直接就绑定了CSS样式无需绑定class
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018-9-14，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
