vue2.0学习笔记(二)--部分内部指令(v-for,v-text,v-html)

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攻击,所以在实际使用的过程中只对信任的内容使用该命令,不允许用户提供的内容使用

猜你喜欢

转载自blog.csdn.net/nianqusuifeng/article/details/88111841
今日推荐