vue中绑定class样式和条件渲染
绑定class样式
-
字符串写法： 适用于： 样式的类名不确定，需要动态指定
-
数组写法： 适用于： 要绑定的样式个数不确定，名字也不确定
-
绑定对象：适用于：要绑定的样式个数确定、名字确定、但动态决定决定用不用
-
<head>.normal{}.happy{}.sad{} </head> <body>//basic和class都是css修饰，而:class="mood"则是动态的随data中的mood改变而改变//字符串写法<div class="basic" :class="mood" @click="change">{{name}}</div>/*数组写法<div class="basic" :class="arr">{{name}}</div>*//*对象写法<div class="basic" :class="classObj">{{name}}</div>*/ </body> <script>new Vue({el: "#root",data: {name: '乡民',mood: 'normal',//数组字符串/*arr:['happy','normal','sad']*//*对象classObj:{happy: false,normal: false,}*/},methods: {change: {//下列实现的是让mood随机显示'happy','normal','sad'这三种样式中的其中一个const arr = ['happy','normal','sad']//floor是让其取整，Math.random从0到3，取头不取尾const index = Math.floor(Math.random()*3)this.mood = arr[index]}}}) </script> -
绑定style
-
第一种style绑定方法
-
<body>{fontSize：size + 'px'}的原型是font-size: 10px,直接用css格式vue不承认<div class="basic" :style="{fontSize：size + 'px'}">{{name}}</div> </body> <script>const vm = new Vue({el:'#root',data: {size: 40}}) </script> 第二种style绑定方法<body><div class="basic" :style="fontSize">{{name}}</div> </body> <script>const vm = new Vue({el:'#root',data: {fontSize: {fontSize: '40px'}}}) </script>
条件渲染
-
v-show做条件渲染
-
v-show="true"将页面的数据显示，v-show="false"只是用css将数据隐藏起来。也就是display: none;
-
v-if="true"也是将页面数据进行显示，v-if="false" 直接将页面的数据删除
-
v-if与v-else-if要挨着写中间不可添加任何标签,如< div>@</div
-
<body><div id="root"><h2>当前的n值为：{{n}}</h2><button :click="n++">点我n+1</button>/*使用v-show做条件渲染<h2 v-show="false">{{name}}</h2><h2 v-show="true">{{name}}</h2>v-if做条件渲染<h2 v-if="false">{{name}}</h2><h2 v-if="true">{{name}}</h2>//v-if和v-else-if，当v-if条件成立时，直接跳出v-else-if和v-else判断<div v-if="n == 1">{{苹果}}</div>/*<div>@</div>*/<div v-else-if="n == 2">{{栗子}}</div><div v-else-if="n == 3">{{榴念}}</div><div v-else>{{榴念}}</div>*/</div> </body> <script>const vm = new Vue({el:'#root',data: {name: 'BOY' }}) </script>-
当重复出现相同的条件时可以用div标签统一实现
-
template标签相对于div标签，template不会影响DOM(页面)的格式
-
<body><div v-show="true"><div>{{栗子}}</div><div>{{榴念}}</div><div>{{梨子}}</div></div>/*<template v-show="true"><div>{{栗子}}</div><div>{{榴念}}</div><div>{{梨子}}</div></template>*/ </body> <script>const vm = new Vue({el:'#root',data: {name: 'BOY' }}) </script>
-