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 = falsenew 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 = falsenew Vue({ el: '#root', data:{name:'尚硅谷',n:0},});</script>
</body>
</html>
