学习笔记（二）——Vue列表展示和计数器案例

最新推荐文章于 2022-09-18 15:10:32 发布

CJM无限Coding

最新推荐文章于 2022-09-18 15:10:32 发布

阅读量256

点赞数 2

分类专栏： Vuejs 文章标签： methods属性 v-on 计数器列表 vue

本文链接：https://blog.csdn.net/qq_38992372/article/details/105669807

版权

Vuejs 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.Vue列表展示（使用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 movies">{{item}}</li>
    </ul>
</div>

<script src="../JS/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:'你好啊',
            movies:['海王','大话西游','盗梦空间','少年派']
        }
    })
</script>
</body>
</html>

浏览器显示：

2.计数器

方式一

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

<script src="../JS/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            counter:0
        }
       
    })
</script>
</body>
</html>

浏览器显示：

方式二

<!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>
    -->
    <button v-on:click="add">+</button>
    <button v-on: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("add被执行");
                this.counter++;
            },
            sub:function () {
                console.log("sub被执行")
                this.counter--;
            }
        }
    })
</script>
</body>
</html>

浏览器显示：

新属性：methods,该属性用于在Vue对象中定义方法

新指令：v-on:click(@click)，该指令用于监听某个元素的点击事件

CJM无限Coding

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
学习笔记（二）——Vue列表展示和计数器案例

1.Vue列表展示（使用v-for指令，后面会详细介绍）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="a...
复制链接

扫一扫