1. class样式绑定
- 字符串写法,适用于:样式的类名不确定,需要动态指定
- 数组写法,适用于:要绑定的样式个数不确定、名字也不确定
- 对象写法,适用于:要绑定的样式个数确定、名字也确定,但要动态决定用不用
使用示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.basic {
width: 400px;
height: 100px;
border: 1px solid black;
}
.normal {
background-color: rgba(255, 255, 0, 0.644);;
}
.happy {
/* 渐变色: 渐变的角度,和渐变的颜色 */
background: linear-gradient(30deg, yellow, pink, orange, yellow);
}
.sad {
background-color: gray;
}
.baidu1 {
background-color: yellowgreen;
}
.baidu2 {
font-size: 30px;
text-shadow: 2px 2px 10px red;
}
.baidu3 {
border-radius: 20px;
}
</style>
<script type="text/javaScript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<!-- 绑定class样式--字符串写法,适用于:样式的类名不确定,需要动态指定 -->
<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>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
name: '百度',
mood: 'normal',
// 可以对classArr进行增删操作
classArr: ['baidu1', 'baidu2', 'baidu3'],
// 可以对classObj内部对象的true/false进行修改
classObj: {
baidu1: false,
baidu2: false,
}
},
methods: {
changeMood() {
const arr = ['normal', 'happy', 'sad']
const index = Math.floor(Math.random() * 3)
this.mood = arr[index]
}
}
})
</script>
</body>
</html>
显示效果如下:
2. style样式绑定
也分为数组写法和对象写法
使用示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.basic {
width: 400px;
height: 100px;
border: 1px solid black;
}
</style>
<script type="text/javaScript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<!-- 绑定style样式--数组写法 -->
<div class="basic" :style="styleArr">{{name}}</div>
<br/><br/>
<!-- 绑定style样式--对象写法 -->
<div class="basic" :style="styleObj">{{name}}</div>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
name: '百度',
// 可以对styleArr进行增删操作
styleArr: [
{
fontSize: '40px',
color: 'blue',
},
{
backgroundColor: 'gray'
}
],
// 可以对styleObj内部对象的值进行修改
styleObj: {
fontSize: '40px',
color: 'red',
}
}
})
</script>
</body>
</html>
显示效果如下:
3. 条件渲染v-show和v-if
- v-show做条件渲染。通过display: none来做隐藏(不占空间),适用切换频率较高的场景
- v-if做条件渲染。通过删除DOM元素来做隐藏。性能比v-show差,切换频率较低的场景
- template于v-if配合使用,而不用引入实际的标签
使用示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javaScript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>当前的n值是:{{n}}</h2>
<button @click="n++">点我n+1</button>
<h2 v-show="showFlag">欢迎来到{{name}}</h2>
<div v-if="n === 1">Angular</div>
<div v-else-if="n === 2">React</div>
<div v-else>vue</div>
<template v-if="n === 1">
<h2>北京</h2>
<h2>上海</h2>
<h2>广州</h2>
</template>
</div>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
name:'vue',
n:0,
showFlag:true
}
})
</script>
</body>
</html>
显示效果: