zoukankan      html  css  js  c++  java
  • 谷粒商城学习——P37vue基本语法——双向绑定、事件处理

    比较简单,直接上代码和注释
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <body>
            <div id="app">
                <!-- v-model实现双向绑定 -->
                <input type="text" v-model="num">
                <!-- v-on:click绑定事件,v-on可用@替代 -->
                <button v-on:click="num++">点赞1</button>
                <!-- 回调自定义的方法。 此时字符串里代表的函数 -->
                <button @click="cancel">取消</button>
                <h1> {{name}} ,非常帅,有{{num}}个人为他点赞{{hello()}}</h1>
            </div>
            <script src="./node_modules/vue/dist/vue.js"></script>
            <script>
                //1、vue声明式渲染
                let vm = new Vue({ //生成vue对象
                    el: "#app", //绑定元素 div id="app" // 可以指定恰标签,但是不可以指定body标签
                    data: { //封装数据
                        name: "张三", // 也可以使用{} //表单中可以取出
                        num: 1
                    },
                    methods: { //封装方法
                        cancel() {
                            this.num--;
                        },
                        hello() {
                            return "1"
                        }
                    }
                });
            </script>
        </body>
    </html>

    效果。点击点赞和取消都会改变图中的数值

  • 相关阅读:
    冲刺第二阶段第十天
    冲刺第二阶段第九天
    冲刺第二阶段第八天
    冲刺第二阶段第七天
    第十三周学习进度条
    冲刺第二阶段第六天
    第二冲刺阶段绩效评估
    Beta版总结会议
    Alpha版总结会议
    第二次冲刺阶段站立会议(十)
  • 原文地址:https://www.cnblogs.com/yanan7890/p/14873441.html
Copyright © 2011-2022 走看看