1.11.绑定样式
class样式：
- 写法：:class=“xxx”，xxx 可以是字符串、数组、对象
- :style=“[a,b]” 其中a、b是样式对象
- **:style=“{fontSize: xxx}”**其中 xxx 是动态值
- 字符串写法适用于：类名不确定，要动态获取
- 数组写法适用于：要绑定多个样式，个数不确定，名字也不确定
- 对象写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>绑定样式</title>
<style>
.basic {width: 300px;height: 50px;border: 1px solid black;}
.happy {border: 3px solid red;background-color: rgba(255, 255, 0, 0.644);
background: linear-gradient(30deg, yellow, pink, orange, yellow);}
.sad {border: 4px dashed rgb(2, 197, 2);background-color: skyblue;}
.normal {background-color: #bfa;}
.atguigu1 {background-color: yellowgreen;}
.atguigu2 {font-size: 20px;text-shadow: 2px 2px 10px red;}
.atguigu3 {border-radius: 20px;}
</style>
<!-- 引入Vue -->
<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><br/><br/>
<!-- 绑定style样式--对象写法 -->
<div class="basic" :style="styleObj">{{name}}</div><br/><br/>
<!-- 绑定style样式--数组写法 -->
<div class="basic" :style="styleArr">{{name}}</div>
</div>
<script type="text/javascript">
// 阻止vue在启动时生成生产提示
Vue.config.productionTip = false
new Vue({
el: '#root',
data:{
name: '尚硅谷',
mood: 'normal',
classArr: ['atguigu1', 'atguigu2', 'atguigu3'],
classObj: {
atguigu1: false,
atguigu2: false
},
styleObj: {
fontSize: '40px',
color: 'red'
},
styleObj: {
fontSize: '40px',
color: 'red',
},
styleArr: [
{
fontSize: '40px',
color: 'blue'
},
{
backgroundColor: 'gray',
}
]
},
methods: {
changeMood() {
const arr = ['happy', 'sad', 'normal'];
const index = Math.floor(Math.random() * 3);
this.mood = arr[index];
}
});
</script>
</body>
</html>
1.12.条件渲染
v-if
-
写法 跟 if else 语法类似
v-if=“表达式”
v-else-if=“表达式”
v-else
-
适用于：切换频率较低的场景，因为不展示的DOM元素直接被移除
-
注意：v-if可以和v-else-if v-else一起使用，但要求结构不能被打断
v-show
- 写法：v-show=“表达式”
- 适用于：切换频率较高的场景
- 特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉display: none
备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到
template标签不影响结构，页面html中不会有此标签，但只能配合v-if，不能配合v-show
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>条件渲染</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
条件渲染:
1.v-if
写法:
(1).v-if="表达式"
(2).v-else-if="表达式"
(3).v-else="表达式"
适用于: 切换频率较低的场景。
特点: 不展示的DOM元素直接被移除。
注意: v-if可以和v-else-if、v-else一起使用，但要求结构不能被"打断"
2.v-show
写法: v-show="表达式"
适用于:切换频率较高的场景。
特点:不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
3.备注: 使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
-->
<!-- 准备好一个容器 -->
<div id="root">
<h2>当前的n值是:{{ n }}</h2>
<button @click="n++">点我n+1</button>
<!-- 使用v-show做条件渲染 -->
<!-- <h2 v-show="false">欢迎来到{{name}}</h2> -->
<!-- <h2 v-show="1 === 1">欢迎来到{{name}}</h2> -->
<!-- 使用v-if做条件渲染 -->
<!-- <h2 v-if="false">欢迎来到{{name}}</h2> -->
<!-- <h2 v-if="1 === 1">欢迎来到{{name}}</h2> -->
<!-- v-else和v-else-if -->
<!-- <div v-show="n === 1">Angular</div> -->
<!-- <div v-show="n === 2">React</div> -->
<!-- <div v-show="n === 3">Vue</div> -->
<!-- <div v-if="n === 1">Angular</div> -->
<!-- <div v-else-if="n === 2">React</div> -->
<!-- <div v-else-if="n === 3">Vue</div> -->
<!-- <div v-else>哈哈</div> -->
<!-- v-if与template的配合使用 -->
<template v-if="n === 1">
<h3>你好</h3>
<h3>尚硅谷</h3>
<h3>北京</h3>
</template>
</div>
<script type="text/javascript">
// 阻止vue在启动时生成生产提示
Vue.config.productionTip = false
new Vue({
el: '#root',
data:{
name:'尚硅谷',
n:0
},
});
</script>
</body>
</html>
