v-for 默认行为试着不改变整体,而是替换元素。迫使其重新排序的元素,你需要提供一个 key 的特殊属性:
<div v-for="item in items" :key="item.id"> {{ item.text }}</div>
v-for 还可以循环数组:
<div id="app"> <ul> <li v-for="n in [1,3,5]"> {{ n }} </li> </ul> </div>
演示 v-else-if 用法,根据分数来判断等级:
<div id="app"> <div v-if="type>='90'"> 优秀 </div> <div v-else-if="type<90&type>=80"> 良 </div> <div v-else-if="type<80&type>=70"> 中等 </div> <div v-else-if="type<70&type>=60"> 及格 </div> <div v-else-if="type<60" > 不及格 </div> </div>
v-if 和 v-show 区别:
v-if 是动态添加,当值为 false 时,是完全移除该元素,即 dom 树中不存在该元素。
v-show 仅是隐藏 / 显示,值为 false 时,该元素依旧存在于 dom 树中。若其原有样式设置了 display: none 则会导致其无法正常显示。
v-else-if 使用实例:
<div id="vApp"> <!--v-else-if 在 2.1.0 新增,顾名思义,用作 v-if 的 else-if 块。可以链式的多次使用--> <input type="text" class="edit" placeholder="判断输入的字符长度" v-model="inp"> <h2 v-if="calLen(inp)>10">输入的字符长度大于10</h2> <h2 v-else-if="calLen(inp)>5">输入的字符长度大于5</h2> <h2 v-else-if="calLen(inp)>0">输入了字符</h2> <h2 v-else>没有输入字符</h2> <div> <!--也可以使用 v-show 指令来根据条件展示元素--> <img src="../asset/img/ic_user.png" v-show="calLen(inp)<=0"> <img src="../asset/img/ic_question.png" v-show="calLen(inp)>0"> <img src="../asset/img/ic_stop.png" v-show="calLen(inp)>5"> <img src="../asset/img/ic_info.png" v-show="calLen(inp)>10"> </div> </div>
感谢您的支持,我会继续努力的!
支付宝扫一扫,即可进行扫码打赏哦
677Vue.js 循环语句
v-for 默认行为试着不改变整体,而是替换元素。迫使其重新排序的元素,你需要提供一个 key 的特殊属性:
676Vue.js 循环语句
v-for 还可以循环数组:
675Vue.js 条件语句
演示 v-else-if 用法,根据分数来判断等级:
674Vue.js 条件语句
v-if 和 v-show 区别:
v-if 是动态添加,当值为 false 时,是完全移除该元素,即 dom 树中不存在该元素。
v-show 仅是隐藏 / 显示,值为 false 时,该元素依旧存在于 dom 树中。若其原有样式设置了 display: none 则会导致其无法正常显示。
673Vue.js 条件语句
v-else-if 使用实例: