Vue学习笔记03-双向绑定与点击事件

最新推荐文章于 2023-08-17 21:59:26 发布

doublewe

最新推荐文章于 2023-08-17 21:59:26 发布

阅读量625

点赞数 1

分类专栏： Vue学习笔记文章标签： vue js html javascript java

本文链接：https://blog.csdn.net/qq_42062052/article/details/103980772

版权

Vue学习笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1.首先我们在已有的模板上面添加一个input标签：

<input type="text" v-model="num" >

这样我们在文本框里面修改num的值的时候，data数据模型里面的num的值也会随之改变。
2.全部html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="num" >
        <h1>大家好，我是{{name}}，我有{{num}}块钱！！！</h1>
    </div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    //创建Vue实例
    const app = new Vue({
        el: "#app",    //根据名称操作div,作用域只在该div
        data: {
            name: "weiwei",
            num: 100
        }
    });

</script>
</html>

3.运行代码，查看浏览器控制台：
在这里插入图片描述

当我修改input文本框里的值，data数据模型里的num也随之改变。
注意： 此处遇到了一个问题，修改之后视图不会实时刷新。下次来解决 (已解决) 。
（解决方法）： 原来是谷歌浏览器会将网页翻译，所以显示的不适原网页，需要将翻译功能关闭，只能算是自己的一个小失误吧。

4.我们还可以添加一个点击事件来修改模型的值：

点击按钮data模型的num值加1.

//  v-on:事件名=js表达式
<input type="button" value="点我加1" v-on:click = "num++">

5.运行代码，效果如图所示：
在这里插入图片描述
6. v-on:click=“方法名” 的用法：

例如依旧是刚才的加一，可以如下。

 <input type="button" value="点我加1" v-on:click="addone">

此时要在Vue实例里面添加addone()方法。

<script>
    //创建Vue实例
    const app = new Vue({
        el: "#app",    //根据名称操作div,作用域只在该div
        data: {
            name: "weiwei",
            num: 100
        },
        methods:{
            addone(){      //方法写在这里
                this.num++;
                this.addtwo();   //调用方法
            },
            addtwo(){    //定义多个方法
				this.num = this.num+2;
			}
        }
    });

</script>

最后运行代码，效果是一样的。
另外，事件绑定可以简写，例如：v-on:click = “add” 可以简写为 @click=“add” 。