vue中v-if,v-show,for

乔小安呐

于 2021-03-25 10:32:00 发布

阅读量100

点赞数

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

本文链接：https://blog.youkuaiyun.com/ZXCVBNM0_123456789/article/details/115200001

版权

vue 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个使用Vue.js的示例项目，演示了如何利用Vue的数据绑定特性，包括条件渲染（v-if与v-show）、事件监听(@click)以及列表渲染(v-for)等功能。通过一个简单的例子展示了Vue.js的基本用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>