1、简介
绑定样式：
1. class样式
写法：class=”xxx” xxx可以是字符串、对象、数组
字符串写法适用于：类名不确定，要动态获取
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用
2. Style样式
:style=”{fontSize:xxx}”其中xxx是动态值
:style=”[a,b]”其中a、b是样式对象
学习Vue之前最后会一些HTML和CSS的基础知识，HTML基础知识 传送门，CSS基础知识 传送门。
2、Class绑定
1. 字符串绑定class
在vscode中创一个新目录，叫“09_绑定样式”，在下面创建一个“1字符串-绑定样式.html”文件，在里面输入以下代码：
<!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>
<script type="text/javascript" src="../js/development/vue.js"></script>
<style>
.basic{
width:400px;
height:100px;
border:1px solid black;
}
.happy{
border: 4px solid red;
background: linear-gradient(30deg,yellow,pink,orange,yellow);
}
.sad{
border:1px solid green;
}
.normal{
}
.atguigu1{
}
.atguigu2{
font-size:30px;
/* box-shadow: 0 0 20px black; */
text-shadow: 0 0 20px yellow;
}
.atguigu3{
border-radius: 20px;
}
</style>
</head>
<body>
<div id="root">
<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
<div class="basic" :class="mood" @click="changeMood">{{name}}</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
name:'Mr Li',
mood:'normal'
},
methods:{
changeMood(){
this.mood = 'happy'
}
},
})
</script>
</body>
</html>该代码和以前代码类似，知识多了CSS样式部分，这里不对CSS样式内容做过多解释，如果实在看不懂记住简单内容即可.是class类型绑定，用来绑定HTML代码中class样式，给出了不同的样式
如果要使用Vue绑定class可以利用学过的v-bind方法，当用户点击后改变class的变量内容，以上代码是字符串写法，适用于：样式类名不确定，需要动态指定的场景
现在以上面案例做改变，需要当用户点击时，随机应用happy、sad、normal样式，代码如下：
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
name:'Mr Li',
mood:'normal'
},
methods:{
changeMood(){
const arr = ['happy','sad','normal']
const index = Math.floor(Math.random()*3)
this.mood = arr[index]
}
},
})
</script>其他地方不用改变，唯一变的是changeMood方法内的内容，以前是直接赋值为happy，现在是使用Math方法成功一个随机数const arr = ['happy','sad','normal']这是一个数组，里面有三个值，Math.random()方法可以得到一个0到1的随机数，该数不可能是1，Math.floor()方法可以取整，里面它们两个的组合就能获得一个0到2的整数，作为数组的下标，这样就实现了一个随机应用样式的案例。
2. 数组绑定class
创建一个“2数组-绑定样式.html”文件，在里面输入以下代码：
<!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>
<script type="text/javascript" src="../js/development/vue.js"></script>
<style>
.basic{
width:400px;
height:100px;
border:1px solid black;
}
.happy{
border: 4px solid red;
background: linear-gradient(30deg,yellow,pink,orange,yellow);
}
.sad{
border:1px solid green;
}
.normal{
}
.atguigu1{
}
.atguigu2{
font-size:30px;
/* box-shadow: 0 0 20px black; */
text-shadow: 0 0 20px yellow;
}
.atguigu3{
border-radius: 20px;
}
</style>
</head>
<body>
<div id="root">
<!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
<div class="basic" :class="classArr" >{{name}}</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
name:'Mr Li',
mood:'normal',
classArr:['atguigu1','atguigu2','atguigu3']
},
})
</script>
</body>
</html>使用数组绑定class的方法即在data中定义一个数组，里面放置要绑定的样式，用法还是用v-bind来绑定。
3. 对象绑定class
现在需求升级，需要绑定的样式数组不确定，如atguigu1和atguigu2两个样式，组合绑定，组合类型如下：
<!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>
<script type="text/javascript" src="../js/development/vue.js"></script>
<style>
.basic{
width:400px;
height:100px;
border:1px solid black;
}
.happy{
border: 4px solid red;
background: linear-gradient(30deg,yellow,pink,orange,yellow);
}
.sad{
border:1px solid green;
}
.normal{
}
.atguigu1{
}
.atguigu2{
font-size:30px;
/* box-shadow: 0 0 20px black; */
text-shadow: 0 0 20px yellow;
}
.atguigu3{
border-radius: 20px;
}
</style>
</head>
<body>
<div id="root">
<!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
<div class="basic" :class="classObj" >{{name}}<br>
</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
name:'Mr Li',
mood:'normal',
classObj:{
atguigu1:false,
atguigu2:false,
}
},
})
</script>
</body>
</html>我们可以利用一个对象classObj为false表示不生效，后面可以自己操作是否生效。
4. 对象绑定style
样式可以直接卸载style中的，那怎么使用Vue直接绑定style呢？
正常写style样式如下：
<div class="basic" style="font-size:40px" >{{name}}<br>如果想使用Vue可以如下：
<div class="basic" :style="{fontSize: fsize+'px'}" >{{name}}<br>fsize是提前在Vue中定义的变量，完整代码如下
这种写法有点不美观，我们可以把表达式放到Vue中去，style中只写一个对象名，如下：
<div class="basic" :style="styleObj" >{{name}}<br>完整代码如下：
<!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>
<script type="text/javascript" src="../js/development/vue.js"></script>
<style>
.basic{
width:400px;
height:100px;
border:1px solid black;
}
.happy{
border: 4px solid red;
background: linear-gradient(30deg,yellow,pink,orange,yellow);
}
.sad{
border:1px solid green;
}
.normal{
}
.atguigu1{
}
.atguigu2{
font-size:30px;
/* box-shadow: 0 0 20px black; */
text-shadow: 0 0 20px yellow;
}
.atguigu3{
border-radius: 20px;
}
</style>
</head>
<body>
<div id="root">
<!-- 绑定style样式---->
<div class="basic" :style="styleObj" >{{name}}<br>
</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
name:'Mr Li',
mood:'normal',
fsize:40,
styleObj:{
fontSize: '40px',
backgroundColor: 'red'
}
},
})
</script>
</body>
</html>5. 数组绑定style
<!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>
<script type="text/javascript" src="../js/development/vue.js"></script>
<style>
.basic{
width:400px;
height:100px;
border:1px solid black;
}
.happy{
border: 4px solid red;
background: linear-gradient(30deg,yellow,pink,orange,yellow);
}
.sad{
border:1px solid green;
}
.normal{
}
.atguigu1{
}
.atguigu2{
font-size:30px;
/* box-shadow: 0 0 20px black; */
text-shadow: 0 0 20px yellow;
}
.atguigu3{
border-radius: 20px;
}
</style>
</head>
<body>
<div id="root">
<!-- 绑定style样式---->
<div class="basic" :style="styleArr" >{{name}}<br>
</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
name:'Mr Li',
mood:'normal',
fsize:40,
styleArr:[
{
fontSize: '40px',
},
{
backgroundColor: 'gray'
}
]
},
})
</script>
</body>
</html>这种方式不常用
3、小结
Style写法如果两个单词拼接比如font-size需要写成fontSize形式
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
