Vue——渲染（文本、列表）、列表数据更新

文本渲染

方法

{ { }}

把内容写在双话括号内，也可以写简单的js表达式。（加减乘除，三元运算符等）


v-html

将模版便签内的内容展示到页面

v-text

将模版便签以及内容展示到页面

实例

<template>
    <div>
        <p v-text = 'hello'></p>
        <p v-html = 'hello'></p>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                hello : '<span>world</span>'
            }
        }
    }
</script>

渲染结果

v-test

<span>world</span>

v-html

world

列表渲染

方法

v-for

data为数组实例1

与{ { }}配合使用

<template>
    <div>
       <ul>
                     // 遍历内容            输出的样式设置
          <li v-for = 'item in list'> <