v-for
v-for用于列表渲染,基于源数据的循环渲染元素或者模板,基本语法为
alias in object
,为当前遍历的元素提供别名。
使用v-for的几种常见情形
<div v-for="item in items">{{ item }}</div>
<div v-for="(item,index) in items">{{ item }} {{ index }}</div>
<div v-for="val in items">{{ val }}</div>
<div v-for="(val,key) in object">{{ val}} {{ key }}</div>
<div v-for="(val,key,index) in object"> {{ val }} {{ key }} {{ index }}</div>
也可以将in替换成of
v-for默认行为不改变整体,而是替换元素,迫使其重新排列的元素需要给其一个:key
<div v-for="item in items" :key="item.id">{{ item }}</div>
v-text
和{{ value}}类似
<div v-text="'this is' text"></div>
等价于<div>this is {{ text }}</div>
v-html
将含有html标签的字符串渲染到页面
<div v-html="<a href='http://www.baidu.com'>"></div>
使用v-html动态渲染的任意HTML都可能会非常危险,容易导致XSS攻击,所以在实际使用的过程中只对信任的内容使用该命令,不允许用户提供的内容使用