Vue.js初次尝试，Class与 Style绑定（九）
2018-11-17 本文已影响3人
葉糖糖
HTML页面中会出现JavaScript和CSS,JavaScript到目前为止我们已经会在Vue中使用了，那么CSS呢？
一、盲人摸象，静观其变
对于有
Web开发经验的童鞋来说，他会选择定义一个样式，然后在HTML元素上加上class或者id等。恭喜你，这些方式都可以达到效果。那么在Vue中可以不可以绑定Class与Style呢？
在Vue中可以使用v-bind指令来绑定class和style，表达式可以是简单的字符串、对象、数组。
如下示例中演示了传统样式的写法与简单的Vue中class绑定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Class与Style绑定</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--自定义页面样式，学习环境这样写；正式项目最好，将样式分离出去。-->
<style type="text/css" rel="stylesheet">
/*默认样式*/
.defStyle{
font-family: "Arial Black";
width: 60%;
height: 40%;
text-align: center;
background-color: aquamarine;
}
/*动态添加样式*/
.active{
font-size: 24px;
color: yellow;
}
</style>
</head>
<body>
<div id="app">
<!--同时绑定2个样式-->
<div class="defStyle" v-bind:class="{active}">
Hello SugarYe
</div>
</div>
</body>
</html>
<script type="text/javascript">
var vm =new Vue({
el:"#app",
data:{
active:'.active'
}
})
</script>
二、一探到底，原形毕露
客官，请看图！
审查元素
可以看出div元素中包含了2个样式，一个是默认的.defStyle,另一个是通过Vue绑定的.active样式。可以看出来，v-bind的样式可以和普通的样式共存。
PS：如果想通过一个属性来控制样式是否显示，这个需求该怎么实现呢？想一想。其实很简单，可以在绑定的样式后面追加一个参数。请看如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Class与Style绑定</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--自定义页面样式，学习环境这样写；正式项目最好，将样式分离出去。-->
<style type="text/css" rel="stylesheet">
/*默认样式*/
.defStyle{
font-family: "Arial Black";
width: 60%;
height: 40%;
text-align: center;
background-color: aquamarine;
}
/*动态添加样式*/
.active{
font-size: 24px;
color: yellow;
}
</style>
</head>
<body>
<div id="app">
<!--根据isActive属性来选择是否绑定active样式-->
<div class="defStyle" v-bind:class="{active:isActive}">
Hello SugarYe
</div>
</div>
</body>
</html>
<script type="text/javascript">
var vm =new Vue({
el:"#app",
data:{
active:'.active',
isActive:false
}
})
</script>
这样就能愉快的控制一个样式的生效与否，是不是感觉很简单呢？接下来，会一起学习Style绑定。敬请期待！
