第一个 vue-demo

最新推荐文章于 2024-08-10 07:55:34 发布

Sys_菜菜

最新推荐文章于 2024-08-10 07:55:34 发布

阅读量175

点赞数

分类专栏：学习技术

本文链接：https://blog.csdn.net/qq_26657121/article/details/106294109

版权

学习同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

技术

5 篇文章 0 订阅

订阅专栏

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../../lib/vue-2.6.11.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="cal">
    <div>
        <ul>
            <li v-for="item in movies">{{item}}</li>
        </ul>
    </div>

        <div>当前计数：{{couter}}</div>
        <button v-on:click="couter++">+</button>
        <button v-on:click="sub">-</button>
    </div>
    <script>
        var calCalss = new Vue({
            el: "#cal",
            data: {
                couter: 0,
                movies: ["星际穿越", "大话西游", "海王"]
            },
            methods:{
                sub: function(){
                    this.couter--;
                }
            }
           
        });
    </script>
</body>
</html>

页面效果

在这里插入图片描述
1、v-for: 循环指令
2、v-on: 监听事件
3、el : 绑定vue的模块
4、data： vue管理的数据
5、methods：方法

Sys_菜菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第一个 vue-demo

代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="../../lib/vue-2.6.11.js"></script> <title>
复制链接

扫一扫

专栏目录