Vue样式
在Vue 中使用样式；
一、使用class样式：
类名必须用引号 引起来；
1、数组
<h1 :class = "['类名1','类名2']">这种方法 需要用 v-bind: => : 绑定
2、数组中使用三元表达式
<h1 :class = "['类名1','类名2',表达式?'类名3':'']">这种方法 需要用 v-bind: => : 绑定
3、数组中嵌套对象
<h1 :class = "['类名1','类名2',{属性名(类名):'属性值(true或false)}]">这种方法 需要用 v-bind: => : 绑定
4、直接适用对象
<h1 :class = "{属性名(类名1):true,属性名(类名2):true}">这种方法 需要用 v-bind: => : 绑定
一般 可变的通过vue 来写；
二、使用内联样式；
1、直接在元素上通过 :style 的形式
<h1 :style = "{'样式名':'样式值'}">这种方法 需要用 v-bind: => : 绑定
2、将样式对象，定义到data 中，在引用到 :style 中
<h1 :style = "vue里的样式">这种方法 需要用 v-bind: => : 绑定
3、在 :style 中通过数组，引用多个 data 上的样式对象；
<h1 :style = "[data1,data2]">这种方法 需要用 v-bind: => : 绑定
一、绑定class样式
绑定calss样式的三种方法：
- 字符串写法
适用于样式的类名不确定，需要动态指定 - 数组写法
适用于要绑定的个数不确定，名字也不确定 - 对象写法
适用于要绑定样式个数确定，名字确定，但是要动态决定用不用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>绑定样式</title>
<style>
.basic{
background-color: rosybrown;
width:100px;
height:100px;
}
.happy{
background-color: sandybrown;
}
.sad{
background-color: slateblue;
}
.normal{
background-color: springgreen;
}
.test01{
background-color: wheat;
}
.test02{
background-color: rgb(82, 37, 134);
}
.test03{
background-color: rgb(153, 1, 9);
}
</style>
<!-- 引入Vue -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<!--绑定class样式:字符串写法 适用于样式的类名不确定，需要动态指定 :class="xxx" -->
<div class="basic" :class="mood" @click="changeMood">
{{name}}
</div>
<br>
<br>
<!--绑定class样式：数组写法 适用于要绑定的个数不确定，名字也不确定 -->
<div class="basic" :class="classArr">
{{name}}
</div>
<br>
<br>
<!--绑定class样式：对象写法 适用于要绑定样式个数确定，名字确定，但是要动态决定用不用 -->
<div class="basic" :class="classObj">
{{name}}
</div>
</div>
<!--阻止vue在启动时生成生产提示 -->
<script type="text/javascript">
Vue.config.productionTip=false
// 创建Vue实例
new Vue({
el:"#root",
data:{
name: "Hello World",
mood:"normal",
classArr:["test01", "test02", "test03"],
classObj:{
test01:false,
test02:false
}
},
methods:{
changeMood(){
const moods = ["happy", "sad", "normal"]
const index = Math.floor(Math.random() * 3)
this.mood=moods[index]
}
}
})
</script>
</body>
</html>
二、绑定Style样式
绑定style样式：
-
字符串写法
:style="{fontSize:xxx}"其中xxx是动态值 -
数组写法
:style="[a,b]"其中a,b是样式对象 -
对象写法
:style="styleObj"其中styleObj是一个对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>绑定style样式</title>
<style>
.basic{
background-color: rosybrown;
width:600px;
height:600px;
}
.happy{
background-color: sandybrown;
}
.sad{
background-color: slateblue;
}
.normal{
background-color: springgreen;
}
.test01{
background-color: wheat;
}
.test02{
background-color: rgb(82, 37, 134);
}
.test03{
background-color: rgb(153, 1, 9);
}
</style>
<!-- 引入Vue -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<!-- -->
<div class="basic" :style="{fontSize: fsize+'px'}">
{{name}}
</div>
<br>
<br>
<!-- -->
<div class="basic" :style="styleObj">
{{name}}
</div>
<br>
<br>
<!-- -->
<div class="basic" :style="styleArr">
{{name}}
</div>
</div>
<!--阻止vue在启动时生成生产提示 -->
<script type="text/javascript">
Vue.config.productionTip=false
// 创建Vue实例
new Vue({
el:"#root",
data:{
name: "Hello World",
fsize:40,
styleObj:{
fontSize:"40px",
},
styleObj2:{
backgroundColor:"black"
},
styleArr:[
{
fontSize:"40px",
color:"yellow",
} ,
{
backgroundColor:"black"
}
]
},
})
</script>
</body>
</html>
