vue中v-if,v-show,for

最新推荐文章于 2024-07-19 10:04:44 发布

乔小安呐

最新推荐文章于 2024-07-19 10:04:44 发布

阅读量75

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/ZXCVBNM0_123456789/article/details/115200001

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>属性和侦听器</title>
    <script src="vue.min.js"></script>

</head>
<body>
    <div id = "text">
        <div v-show = "show" >hello world</div><!--v-if 的时候，运行时把这个给注释掉了,（频率大的时候建议用show）v-show :是给加了个display：none的属性-->
        <div v-if = "show" >hello world</div>
        <button @clifick = "handleClick">button</button>
        <ul>
            <li v-for = "(item,index) of list" key = "index">{{item}}</li>
            <!--此处循环用 value ,key的形式是因为，增加上下标会加大效率-->
        </ul>
    </div>
    <script>
        new Vue({
            el: "#text",
            data: {
                show : true,
                list: [1,2,3]
            },
            methods: {
                    handleClick: function(){
                    this.show = false
                }
            }
            
        })

    </script>
</body>
</html>