Vue学习------v-for 列表的使用和 v-on 点击加减数字

最新推荐文章于 2024-07-22 15:53:04 发布

OrdnAry

最新推荐文章于 2024-07-22 15:53:04 发布

阅读量574

点赞数 2

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

本文链接：https://blog.youkuaiyun.com/OrdnAry/article/details/113662577

版权

学习专栏收录该内容

59 篇文章

订阅专栏

这篇博客介绍了Vue.js中两个重要的指令：v-for用于列表渲染，展示了如何遍历数组并显示元素；v-on则用于事件监听，通过简写方式实现了点击按钮增加和减少计数器的示例。示例代码详细解释了这两个指令的使用方法及其在实际应用中的作用。

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

v-for 列表的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <ul>
        <li v-for="item in shuzu">{{item}}</li>
    </ul>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            shuzu:["a","b","c","d"]
        }
    })
</script>

</body>
</html>

在这里插入图片描述

v-on 点击加减数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h2>当前计数为：{{counter}}</h2>
    <!-- <button v-on:click="counter++">+</button>
    <button v-on:click="counter--">-</button> -->
    <!-- 简写  v-on 用方法-->
    <button @click="add">+</button>
    <button @click="sub">-</button>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            counter:0
        },
        methods:{
            add:function(){
                console.log("加一个数字");
                this.counter++; //注意这里面要用this.
            },
            sub:function(){
                console.log("减一个数字");
                this.counter--;//注意这里面要用this.
            }
        }
    })
</script>

</body>
</html>