vue中输出的值传到input输入框中

最新推荐文章于 2023-02-11 15:26:38 发布

原创最新推荐文章于 2023-02-11 15:26:38 发布

· 8.3k 阅读

16 ·

版权

文章标签：

#vue

本文介绍在Vue项目中如何将获取到的值传递到input输入框。通过一个简单的加法计算器示例，展示了如何使用Vue双向数据绑定实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue中输出的值传到input输入框中

今天在做项目中，遇到一个问题，就是获取到的input值如何传到另一个input输入框中，在网上查了查，发现很简单，只是自己粗心大意，所以忽略了。下面我将自己的问题与解决办法写出来。
写一个简单的加法计算器
效果图：
在这里插入图片描述

<div id="app">
        <p>加法</p>
        <input type="text" value="" v-model="s1">
        <input type="text" value="" v-model="s2">       
        <input type="button" value="结果" @click="add">
         <input type="text" v-model="rs"><!--v-model="add()" -->
    </div>

this.s1可以获取输入框内容

<script src="./vue.js"></script>//引入vue
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                s1:0,
                s2:0,
                rs:0
                
            },
            methods: {               
                add:function(){
                //this.rs这个可以把答案填写在input的输入框中
                   this.rs= parseFloat(this.s1)+parseFloat(this.s2);
                    }
            }
        })
    </script>