标签：login show 管理 message 没有 -- display foo 多个
渲染：条件渲染，列表渲染
1.条件渲染
v-if、v-else、v-else-if v-else、v-else-if 必须跟在v-if、v-else-if 之后否则不会被识别
<div v-if="Math.random() > 0.5"> Now you see me </div> <div v-else> Now you don‘t </div> <!-- 如果切换多个元素，可以在外面包含一层template，template不会显示 --> <template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template> <!-- v-else-if --> <div v-if="type === ‘A‘"> A </div> <div v-else-if="type === ‘B‘"> B </div> <div v-else-if="type === ‘C‘"> C </div> <div v-else> Not A/B/C </div>
key管理可复用的元素
下面例子中，input如果没有添加key，会复用，切换时，用户输入的值，会保留，只是替换了placeholder
添加了唯一值key，input是两个独立的，每次切换时，都会重新渲染
<template v-if="loginType === ‘username‘"> <label>Username</label> <input placeholder="Enter your username" key="username-input"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address" key="email-input"> </template>
v-show v-show始终渲染，只是切换display属性，不支持<template>元素
<h1 v-show="ok">Hello!</h1>
v-if与v-show的区别
2.列表渲染
v-for v-for指令根据一组数组的选项列表进行渲染。绑定key：key 防止重用和重新排序现有元素
渲染数组
item in items语法，可以使用 of 代替 in，支持可选的第二个参数 (item, index) in items
<ul id="example-1"> <li v-for="item in items" :key="item.id"> {{ item.message }} </li> </ul> <!-- 带index --> <ul id="example-2"> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> </ul>
var example1 = new Vue({ el: ‘#example-1‘, data: { items: [ { message: ‘Foo‘ }, { message: ‘Bar‘ } ] } })
v-for和v-if
当v-for和v-if处于同一节点时，v-for的优先级比v-if的优先级高。如果你是有条件的跳过循环的执行，可以将v-if置于外层元素(或<template>)。
<li v-for="todo in todos" v-if="!todo.isComplete"> {{ todo }} </li> //只显示未完成的todo <ul v-if="todos.length"> <li v-for="todo in todos"> {{ todo }} </li> </ul> <p v-else>No todos left!</p> //置于外层循环
渲染对象
value in object方法，支持第二个参数key和第三个参数index
<div v-for="(value, key, index) in object"> {{ index }}. {{ key }}: {{ value }} </div>
new Vue({ el: ‘#v-for-object‘, data: { object: { firstName: ‘John‘, lastName: ‘Doe‘, age: 30 } } })
标签：login show 管理 message 没有 -- display foo 多个
原文地址：https://www.cnblogs.com/zsj-02-14/p/10483367.html
