Vue学习--双向绑定

theLuckyLong

已于 2023-08-10 15:14:35 修改

阅读量152

点赞数

分类专栏： Vue 文章标签： vue

于 2021-03-31 12:10:21 首次发布

本文链接：https://blog.csdn.net/theLuckyLong/article/details/115342935

版权

Vue 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js中v-model指令的使用，通过一个简单的例子展示了如何将输入框的数据与Vue实例的data属性绑定。接着，进阶讨论了如何在输入摄氏温度后，利用v-model实时转换并显示华氏温度，实现了数据双向绑定和计算方法的调用。最后，总结了v-model在表单元素上的应用及其简写形式。

摘要由CSDN通过智能技术生成

前言

设想一个这样的情况：在前端有一个输入框，一个输出框，当用户在输入框输入数据时，输出框也会显示。
这时，可以用到v-model指令：将前端的输入数据与Vue中的data域中的属性进行绑定。

v-model

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue的js文件-->
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" placeholder="请输入年龄" v-model="age"><br>
        <p>你的年龄是：</p>
        <input type="text" v-model="age">
    </div>



<script>
    let vm = new Vue({
        el: "#app",
        data: {
            age: null
        }
    });

</script>
</body>
</html>

此时，v-model的作用是将input中的value属性与data域中的age属性进行绑定，并监听输入事件，一旦前端的value进行改变，data域中的age属性也随之改变。

进阶

现在需求变了：输入框中输入摄氏温度，输出框展示华氏温度（摄氏度华氏度换算公式：摄氏度×9÷5＋32=华氏度）

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue的js文件-->
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" placeholder="请输入摄氏温度" v-model="tem"><br>
        <p>华氏温度：</p>
        <input type="text" v-model="changeTem()">
    </div>



<script>
    let vm = new Vue({
        el: "#app",
        data: {
            age: null,
            tem: 0
        },
        methods: {
			changeTem: function(){
				if(this.tem) return ((this.tem*9)/5+32);
            }
        }
    });

</script>
</body>
</html>