Class与style绑定、条件渲染和列表渲染
目标:
- 熟练使用class与style绑定的多种方式
- 熟悉v-if与v-for的用法,以及v-if和v-for一起使用的注意事项
class与style绑定的多种方式
- 绑定class和style都是使用v-bind也就是:
- 无论是绑定class还是style,都有两种方式,一种是对象,一种是数组.
- class和:class是共存的
绑定示例
1.class对象绑定
<!-- 根据isActivity的真假,判断是否应用activity这个class -->
<div :class="{activity:isActivity}"></div>
2.class数组绑定
<!-- 应用数组里面的class -->
<div :class="[activity, activityOne]"></div>
3.style对象绑定
<!-- 应用这个样式对象的样式 -->
<div :style="styleObj"></div>
<script>
...
//styleObj写在data里面
data() {
return {
styleObj: {
color: ‘black‘
}
}
}
...
</script>
4.style数组绑定
<!-- 应用这个数组里面的样式 -->
<div :style="[styleObj,{fontSize:‘25px‘}]"></div>
v-if与v-for的用法
条件渲染
1.v-if="表达式", 表达式的真假值决定了是否挂载到页面上
<div v-if="isTrue">这一段会在html里面,而且会显示出来</div>
<div v-if="isFalse">这段不会在html里面,也不会显示出来</div>
2.v-show="表达式", 表达式的真假值决定了该节点的display属性是none / block
<div v-show="isTrue">display: block,会显示出来</div>
<div v-show="isFalse">display: none,不会显示出来</div>
3.区别: 功能都是一样,实现节点是否显示出来,但是v-if会操作dom,会重新渲染页面
4.v-if的话,还有v-if-else和v-else这两个命令, 不过要连着一起用,中间不能有其他东西隔开,使用规则和js的if..else语句一样
列表渲染
1.v-for of
<li v-for="item of list">{{item}}</li> //其中list为数组,item为数组元素
<li v-for="(item,index) of list">{{index}}{{item}}</li> //其中list为数组,index为索引(第一个0开始),item为数组元素
2.循环渲染对象
//其中userInfo为对象, item为值, key为键, index为索引
<li v-for="(item, key, index) of userInfo">{{item}}{{key}}{{index}}</li>
3.一般会加个key值,避免互相影响(语法检测会检测这个,添加key值之后就会互相区分独立,相同部分也会重新渲染,不会复用)
<li v-for="(item, index) of list" :key="index"></li>
或<li v-for="(item, index) of list" :key="item.id"></li>
4.key和index是可选的
v-if和v-for一起使用的注意事项
1.v-for的优先级比v-if更高, 如果它们处于同一个节点,这样v-if将分别重复运行于每个v-for循环中.
也就是, 先执行v-for,v-for出来的每一项都会执行一次v-if.
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>
2.如果想先执行v-if再判断是否执行v-for, 可以将v-if置于外层元素(或template)上.
<ul v-if="todos.length">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
<p v-else>No todos left!</p>
原文地址:https://www.cnblogs.com/chifung/p/9322616.html
时间: 2024-10-29 19:12:08