第三篇章:列表渲染、条件渲染(v-for、v-if、v-for-with-v-if、push、pop、shift、unshift、splice、sort、reverse、v-html)
在 v-for
块中,我们拥有对父作用域属性的完全访问权限。 v-for
还支持一个可选的第二个参数为当前项的索引。
<ul id="example-2"> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> </ul>
var example2 = new Vue({ el: '#example-2', data: { parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' } ] } })
v-if 、v-else、v-show、还可以使用template
<div v-if="ok">ok</div> <div v-else>No</div> <div v-show="ok">ok</div> <template v-if="ok"> <strong>测试template</strong> </template> <template v-else> <strong>no template</strong> </template>
列表渲染 http://cn.vuejs.org/v2/guide/list.html#v-for
使用v-html解决Vue.js渲染过程中html标签不能被解析(html标签显示为字符串)
Vue.js中提供了v-html这个指令来解决这个问题,或者对数据对象使用{{{vm.data}}}三个大括号来包裹对象,就可以正常解析了
<dl class="dlwrap dlwarpCh" v-html="goods.goods_desc"></dl>
本地效果为:http://localhost:8090/#/goods/180
原为来自:http://blog.csdn.net/faryang/article/details/53011703