第三篇章:列表渲染、条件渲染(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

 

posted @ 2017-06-11 21:14  chenguiya  阅读(957)  评论(0)    收藏  举报