首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Vue学习(四)v-if、v-show、v-for

v-if:

v-if是一个指令,(逻辑与原生js一样,只是使用方法稍有不同)需要添加在元素上,如果想要添加在多个元素上,可以使用标签当成一个容器。

代码语言:javascript
复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Vue学习</title>
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <div  v-if="show">hello world</div>
            <button @click="click">toggle</button>
        </div>
    </body>
    <script>
        new Vue({
            el:"#root",
            data:{
                show:true,
            },
            methods:{
                click:function(){
                    this.show=!this.show
                }
            }
        })
    </script>
</html>

v-show 与 v-if 的使用方法一致,不同点在于,v-if在每一次切换是都会重新渲染,如果一开始的条件是false,则会等到第一次条件成立开始渲染。v-show 无论初始条件如何,都会渲染进来,改变的是DOM的 display :none/block。如果需要多次渲染,使用v-show。

代码语言:javascript
复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Vue学习</title>
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <div  v-show="show">hello world</div>
            <button @click="click">toggle</button>
        </div>
    </body>
    <script>
        new Vue({
            el:"#root",
            data:{
                show:true,
            },
            methods:{
                click:function(){
                    this.show=!this.show
                }
            }
        })
    </script>
</html>

v-for: v-for类似与js中的遍历,使用方法为v-for(item in items),items是数组 item是数组中的元素。在 v-if与v-for一起使用时,v-for的权重更高。

代码语言:javascript
复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Vue学习</title>
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <ul>
                <li v-for="item of list">{{item}}</li>
            </ul>
        </div>
    </body>
    <script>
        new Vue({
            el:"#root",
            data:{
                list:[1,2,3]
            }
        })
    </script>
</html>
举报
领券