1.11 绑定样式
class样式
写法：:class="xxx" xxx可以是字符串、对象、数。
所以分为三种写法，字符串写法，数组写法，对象写法
字符串写法
字符串写法适用于：类名不确定，要动态获取。
<style> .normal{ background-color: skyblue; } </style> <!-- 准备好一个容器--> <div id="root"> <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 --> <div class="basic" :class="mood" @click="changeMood">{{name}}</div> </div> <script> const vm = new Vue({ el:'#root', data:{ mood:'normal' } }) </script>
数组写法
数组写法适用于：要绑定多个样式，个数不确定，名字也不确定。
<style> .atguigu1{ background-color: yellowgreen; } .atguigu2{ font-size: 30px; text-shadow:2px 2px 10px red; } .atguigu3{ border-radius: 20px; } </style> <!-- 准备好一个容器--> <div id="root"> <!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 --> <div class="basic" :class="classArr">{{name}}</div> </div> <script> const vm = new Vue({ el:'#root', data:{ classArr: ['atguigu1','atguigu2','atguigu3'] } }) </script>
对象写法
对象写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
<style> .atguigu1{ background-color: yellowgreen; } .atguigu2{ font-size: 30px; text-shadow:2px 2px 10px red; } </style> <!-- 准备好一个容器--> <div id="root"> <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 --> <div class="basic" :class="classObj">{{name}}</div> </div> <script> const vm = new Vue({ el:'#root', data:{ classObj:{ atguigu1:false, atguigu2:false, } } }) </script>
style样式
有两种写法，对象写法，数组写法
对象写法
<!-- 准备好一个容器--> <div id="root"> <!-- 绑定style样式--对象写法 --> <div class="basic" :style="styleObj">{{name}}</div> </div> <script> const vm = new Vue({ el:'#root', data:{ styleObj:{ fontSize: '40px', color:'red', } } }) </script>
数组写法
<!-- 准备好一个容器--> <div id="root"> <!-- 绑定style样式--数组写法 --> <div class="basic" :style="styleArr">{{name}}</div> </div> <script> const vm = new Vue({ el:'#root', data:{ styleArr:[ { fontSize: '40px', color:'blue', }, { backgroundColor:'gray' } ] } }) </script>
1.12 条件渲染
v-if
- 写法：
(1).v-if="表达式"
(2).v-else-if="表达式"
(3).v-else="表达式" - 适用于：切换频率较低的场景
- 特点：不展示的DOM元素直接被移除
- 注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”
<!-- 准备好一个容器--> <div id="root"> <!-- 使用v-if做条件渲染 --> <h2 v-if="false">欢迎来到{{name}}</h2> <h2 v-if="1 === 1">欢迎来到{{name}}</h2> <!-- v-else和v-else-if --> <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"> <h2>你好</h2> <h2>尚硅谷</h2> <h2>北京</h2> </template> </div> <script> const vm = new Vue({ el:'#root', data:{ styleArr:[ { fontSize: '40px', color:'blue', }, { backgroundColor:'gray' } ] } }) </script>
v-show
- 写法：v-show="表达式"
- 适用于：切换频率较高的场景
- 特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉(display:none)
备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到
v-if 是实打实地改变dom元素，v-show 是隐藏或显示dom元素
<!-- 准备好一个容器--> <div id="root"> <!-- 使用v-show做条件渲染 --> <h2 v-show="false">欢迎来到{{name}}</h2> <h2 v-show="1 === 1">欢迎来到{{name}}</h2> </div>
