02v-for和v-on

最新推荐文章于 2022-11-11 16:45:06 发布

hl971226

最新推荐文章于 2022-11-11 16:45:06 发布

阅读量275

点赞数

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

本文链接：https://blog.csdn.net/hl971226/article/details/107722710

版权

vue js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、vue案例之二————列表展示

1.v-for遍历

js的列表显示使用ul>li标签一个一个可利用数组显示，麻烦复杂
-利用Vue的v-for遍历只需要一条语句，可简化，提高效率

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id ="ccc">
    <ul>
        <li v-for="item in movies">{{item}}</li>
    </ul>
</div>
<script src="../js/vue.js"></script>
<script>
    const ccc =new Vue({
        el: '#ccc',
        data:{
            message:'你好啊',
            movies:['星际穿越','霸王别姬','肖申克的救赎','大话西游']
        }
    })
</script>
</body>
</html>

在这里插入图片描述

利用声明式item指代movie的数据

可任意添加删除数据，效率高

Vue案例之三————计数器

目的：现在,我们来实现-一个小的计数器
点击+计数器+1
点击一计数器-1

1. 采用js思路

先在html建两个按钮
在设置点击事件 on click
在javascript中设置程序每点击一次就加或减一

缺点：这个范式是命令式的一步计算一步

2. 采用vue中的v-on语句

v-on可监听指向函数发生的事件，如click事件
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>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            counter:0,
        }
    })
</script>

</body>
</html>

在这里插入图片描述

当v-on要执行两个以上的复杂指令时，需要调用method中自建的function函数

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