第一个 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>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:方法

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 创作都市 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读