Vue学习日志3：动态渲染

通常将条件渲染和列表渲染同一成为动态渲染

1.条件渲染

vue使用v-if v-else 和v-show等条件语句控制标签的渲染，已应对不同业务逻辑的要求，示例代码如下：

<template>
    <h3>条件渲染</h3>
    <div v-if="msg1">ture则显示</div>
    <div v-if="msg2">false则不显示</div>

</template>

<script>
//该demo用于测试条件渲染和动态渲染
export default
    {
        data() {
            return {
                msg1: true,
                msg2: false
            }
        }
    }

</script>

<style>
</style>

对于v-if来所，当其值为真时则显示，当期值为假的时候则不显示，因此运行结果如下图所示：

2.列表渲染

在实际的应用中多条消息的场景是非常常见的，vue使用 v-for的方式进行列表渲染，渲染时采用item in items的语法。类似于C#中的for each ，这里的 item要放在后面的{{}}中，示例代码如下：

<template>
    <h3>列表渲染</h3>
    <p v-for="item in items">每条数据 {{ item }}</p>

</template>

<script>
//该demo用于测试条件渲染和动态渲染
export default
    {
        data() {
            return {
                items:["item1","item2","item3","item4"]
            }
        }
    }

</script>

<style>
</style>

{{}}中的item会成为变量，渲染数据中的内容，因此运行效果如下图所示

在列表渲染过程中通常使用key来管理状态，防止数据的顺序错误，因为v-for采用就地更新的模式，这里不再赘述。