绑定样式
- class样式
写法 :class="xxx" xxx可以是字符串，对象，数组
字符串写法适用于：类名不确定，要动态获取。
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用
- style样式
:style="{fontSize:xxx}" 其中XXX是动态值。
:style="{a,b}" 其中a,b是样式对象。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绑定样式</title><script type="text/javascript" src="../js/vue.js"></script><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;}.atguiu1{background-color: yellowgreen;}.atguiu2{font-size: 20px; text-shadow: 2px 2px 10px red;}.atguiu3{border-radius: 20px;}</style>
</head><div id="root"><div class="basic" :class="mood" @click="changeMood">{{name}}</div><br/><br/><div class="basic" :class="classArr" >{{name}}</div> <br/><br/><div class="basic" :class="classObj">{{name}}</div> <br/><br/><div class="basic" :style="{fontSize: fsize+'px'}">{{name}}</div> <br/><br/><div class="basic" :style="styleObj">{{name}}</div> <br/><br/><div class="basic" :style="[styleObj,styleObj2]">{{name}}</div> <br/><br/><div class="basic" :style="styleArr">{{name}}</div> <br/><br/></div><script type="text/javascript">Vue.config.productionTip =false const vm=new Vue({el:'#root', data: {name:'尚硅谷',mood:"normal",classArr:['atguiu1','atguiu2','atguiu3'],classObj:{atguiu1:false,atguiu2:false},fsize: '40px',styleObj:{fontSize:'40px',color:'red'},styleObj2:{backgroundColor:'orange'},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>
条件渲染
- v-if
写法：
(1)v-if=“表达式”
(2)v-else-if=“表达式”
(3)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
<div id="root"><h2>当前的n值是:{{n}}</h2><button @click="n++">点我n+1</button><div v-if="n===1">Angular</div><div v-if="n===2">React</div><div v-if="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><template v-if="n===1"><h2>北京</h2><h2>上海</h2><h2>尚硅谷</h2></template></div><script type="text/javascript">Vue.config.productionTip =false const vm=new Vue({el:'#root', data: {name:'尚硅谷',n:0}});</script>
