走进Vue的第三天

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-if，v-show，v-for指令</title>
    <script src="vue.js"></script>
</head>
<body>
<!--
    在本代码中可以看出：v-if可以实现代码隐藏或者显示，但是它的实现方式是直接删除页面的代码或者加入代码（频率不大的时候可以使用这个）；而v-show的表现形式则不一样，它主要是用来修改代码的属性（性能会高一些）
-->
    <div id="root">
        <div v-show="show">Hello World</div>
        <button @click="showOrHide">点击显示或隐藏</button>
        <ul>
            <li v-for="(item,index) in list" :key="index">
                {{index}}
            </li>
        </ul>

        <ul>
            <li v-for="(item,index) in books">
                {{item.name}}的作者是{{item.author}}
            </li>
        </ul>
    </div>


    <script>
        new Vue({
            el:"#root",
            data:{
                show:true,
                list:[1,2,3],
                books:[
                    {
                        name:'西游记',
                        author:'张三'
                    },
                    {
                        name:'红楼梦',
                        author:'李四'
                    }
                ]
            },
            methods:{
                showOrHide:function () {
                    this.show=!this.show;
                }
            }
        })
    </script>
</body>
</html>
posted @ 2019-07-09 11:32 车车大人阅读(139) 评论(0) 编辑收藏举报
刷新页面返回顶部