【Vue.js】v-if、v-show、v-for指令（六）

作者: kingloongMagic | 来源:发表于2018-08-28 22:59 被阅读0次

2018-05-30
10-Vue的常用指令
五、Vue的条件渲染（v-if、v-show、v-for指令）
vue指令
vue基础内容
Vue.js 学习
指令
Vue 2.5从零开始学习 — v-if，v-show，v-f
vue基础
Vue 进阶属性（directives、mixins、exten

1、v-if，控制元素是否存在，删除或创建dom，如果做隐藏建议使用v-show

2、v-show,可做隐藏、显示，不删除dom，只是设置css，推荐使用v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue学习</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <div v-if="show">hello</div>
        <button @click="handleClick">click</button>
    </div>
    <script>
        new Vue({
            el:"#root",
            data:{
                show:true,
            },
            methods:{
                handleClick:function () {
                    this.show = !this.show;
                }
           &ensp},
        })
    </script>
</body>
</html>

3、v-for循环语句

:key在循环中建立索引，提高效率，如果列表数据有重复，需要用index来做索引，如果列表需要做排序或修改，则索引不能使用值或index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue学习</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <div v-if="show">hello</div>
        <button @click="handleClick">click</button>
        <ul>
            <li v-for="(item, index) of list" :key="index">{{item}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el:"#root",
            data:{
                show:true,
                list:[1,2,3,4,5,6,6,8]
            },
            methods:{
                handleClick:function () {
                    this.show = !this.show;
                }
            },
        })
    </script>
</body>
</html>