search.png
关于我
 menu.png
Vue（四）——模板渲染
模板渲染

Vue.js 提供v-if，v-show，v-else，v-for 这几个指令来说明模板和数据间的逻辑关 系，这基本就构成了模板引擎的主要部分。

  • v-if、v-else

    <div v-if="yes">yes</div> 
<div v-else>no</div> //如果app.yes == true则会输出yes反则输出no

  • v-show
    与 v-if 不同的是，v-show 元素的使用会渲染并保持在 DOM 中。v-show 只是切换元素 的 css 属性 display。例如： 

    <div v-if="show">if</div> 
<div v-show="show">show</div> //app.show 为false时，style='display:none;'

    v-show有着更高的初始渲染消耗（因为可能要设置display），而v-if有着更高的切换消耗（当数据发生改变时需要进行更多的修改）

  • v-for
    v-for 指令主要用于列表渲染，将根据接收到数组重复渲染 v-for 绑定到的 DOM 元素及内部的子元素，并且可以通过设置别名的方式，获取数组内数据渲染到节点中。
    v-for内置了索引变量$index，我们也可以自己指定索引的别名，例如：

<ul>
 　 <li v-for="(index,item) in items">
 　　  <h3>{{item.title}}-{{index}}-{{$index}}</h3>
 　　  <p>{{item.description}}</p>
 　 </li> 
</ul> 

var app = new Vue({
 　 el : '#app',
 　 data: {
 　　 items : [
 　　　  { title: 'title-1', description: 'description-1'},
 　　　  { title: 'title-2', description: 'description-2'},
 　　　  { title: 'title-3', description: 'description-3'},
 　　　  { title: 'title-4', description: 'description-4'}
 　　 ]
 　 }
 })

结果为：

<ul>
 　 <li>
 　　  <h3>title-1-0-0</h3>
 　　  <p>description-1</p>
 　 </li>
    <li>
 　　  <h3>title-2-1-1</h3>
 　　  <p>description-2</p>
 　 </li>
    <li>
 　　  <h3>title-3-2-2</h3>
　　  <p>description-3</p>
 　 </li>
    <li>
 　　  <h3>title-4-3-3</h3>
 　　  <p>description-4</p>
 　 </li> 
</ul>

需要注意的是，使用数组的索引来修改数组元素是不会触发视图更新的，如app.items[0] = { title: 'title-change'}，但是我们可以使用$set方法，可以写成：

app.items.$set(0, { title: 'title-change' })
或者
app.$set('items[0]', { title: 'title-change' })

通过使用trace-by可以给数组设定唯一的标识，Vue.js 在渲染过程中会尽量复用原有对象的作用域及 DOM 元素，会提高渲染时的效率。
除了遍历数组之外，v-for还可以遍历对象（使用(key, value) in objects，内置索引为$key），还可以遍历整数（v-for='n in 5'，代表遍历五次）

  • template标签
    通过使用tamplate标签我们可以方便的遍历多个的兄弟节点，而在最后的渲染结果中不会出现它：
    ```

或者

```

版权声明

知识共享许可协议 本文章由作者“衡于墨”创作，转载请注明出处，未经允许禁止用于商业用途

本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。
发布时间：2019年04月30日 23:42:12

评论区#

还没有评论哦，期待您的评论！

备案号： 闽ICP备19015193号-1 
关闭特效