vue:v-on和v-model指令

v-on指令很简单，当我们写完一个函数以后，可以在对应标签(一般是类型为button的input标签)上绑定我们自己编写的函数。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <input type="button" value="click" @click="doProgram">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            methods:{
                doProgram:function () {
                    console.log('当码农好啊，夏天脑袋上贼凉快，真的。');
                }
            }
        })
    </script>
</body>
</html>

但这太简单了，显然不是我们想要学习并掌握的全部，我们来给它加几个参数看看！

<body>
    <div id="app">
        <input type="button" value="click" @click="doProgram(666)">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            methods:{
                doProgram:function (p1) {
                    console.log('当码农好啊，夏天脑袋上贼凉快，真的。');
                    console.log(p1);
                }
            }
        })
    </script>
</body>

此时，我给doProgram这个函数加上了一个参数，并在点击事件中传了值：666，并在函数中实现了简单逻辑，其效果是显而易见的，我就不展示了。

当然也能实现多参数传递，例如字符串也是可以的，这下我要展示了，看看！

我的doProgram函数现在是这样子的：doProgram(666,'你再骂！？'),当然在script中的代码也要做对应修改。

特别注意这里是单引号！因为这是在html模板中，前面已经有一个双引号了！一开始我就因为没有写单引号，而导致多了一个666.现在长这样：

好了，现在还有事件修饰符！我们可以实现按下回车键后，就会弹出一个框。

当然需要keyup.enter!这个enter是回车的意思啦！

<body>
    <div id="app">
        <input type="button" value="click" @click="doProgram(666, '你再骂！？')">
        <input type="text" @keyup.enter="sayHi">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            methods:{
                doProgram:function (p1, p2) {
                    console.log('当码农好啊，夏天脑袋上贼凉快，真的。');
                    console.log(p1);
                    console.log(p2);
                },
                sayHi:function () {
                    alert('40米大刀藏不住了');
                }
            }
        })
    </script>
</body>

就这样：

鉴于v-model指令比较简单(其实都很简单)，就放这里一并写了。

v-model这个指令的作用是双向奔赴，也就是：设置和获取表单元素的值，进行双向数据绑定。

简单地说，就是比如你搞一个文本框，在里面随便打一些字，那么这个时候其实在下面的script中的数据也是同步改变的。

举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message">
        <h2>{{ message }}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"Evan!",
            },
            methods:{

            }
        })
    </script>
</body>
</html>

在数据中有一个message，我在h2标签中渲染了message，同事在input标签中用v-model给关联了起来，那么这个时候，你就会发现：

知道了吧，上下是会同时变的！

接下来我们来获取：

为了获取这个值，我们使用上一节讲过的v-on指令，为此，需要写一个函数getInfo.这个函数的功能，就是弹框，弹出message的内容。此外，在input标签上，加上keyup.enter来绑定这个函数，我们希望在随便打一些字并按下回车之后，能弹出我们刚刚打的内容。

<body>
    <div id="app">
        <input type="text" v-model="message" @keyup.enter="getInfo">
        <h2>{{ message }}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"Evan!",
            },
            methods:{
                getInfo:function () {
                    alert(this.message);
                }
            }
        })
    </script>
</body>

来看效果：

自然，我们也是可以修改message的值的！

来看：

我设置一个修改message值的函数，并添加一个按钮，点击按钮，那么对应地方的message值就应该被修改。

<body>
    <div id="app">
        <input type="button" value="click to modify" @click="setInfo">
        <input type="text" v-model="message" @keyup.enter="getInfo">
        <h2>{{ message }}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"Evan!",
            },
            methods:{
                getInfo:function () {
                    alert(this.message);
                },
                setInfo:function () {
                    this.message = "世界！";
                }
            }
        })
    </script>
</body>

刚开始是这样，注意看别眨眼！

太神奇啦！米奇妙妙屋啊，太妙啦！

posted @ 2022-02-14 17:27 EvanTheBoy 阅读(236) 评论(0) 收藏举报

刷新页面返回顶部

EvanTheBoy

vue:v-on和v-model指令

公告