打赏

谷粒商城学习——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>

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

 

 

 

posted @ 2021-06-11 00:01  每天都要学一点  阅读(52)  评论(0)  编辑  收藏  举报