后台传的字符串为HTML代码，在前台已经可以显示，用户填写信息后如何将信息填入？

现有如下需求
后台传入的字符串中含有HTML代码，
其中含有input输入框，用户要再输入框中输入信息后，点击按钮
将该字符串重新组装再传回后台

前端框架使用的是VUE

样例如下：

图片说明

代码如下

<body>
    <div class="header">
        <div v-html="content"></div>
        <button @click="getContent">button</button>
    </div>

</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="js/jquery-1.9.1.min.js"></script>
<script>
new Vue({
    el:'.header',
    data:{
        content:"用户名<input type='text' id='a_b_1'></br>密码<input type='text' id='a_b_2'>"
    },
    methods: {
        getContent(){

        }
    },
})
</script>

用户名密码输入后（假设输入的为用户名为123，密码为123），如何获取值，并将content中的内容改为

 content:"用户名<input type='text' id='a_b_1' value='123'></br>密码<input type='text' id='a_b_2' value='123'>"

不推荐用着用逻辑，但一定要做的话

function getContent()
 {
 var t=document.getElementById("a_b_1");
 t.value="修改文本内容" //获取值或者修改值
 //content不会变应为是单项绑定的也没必要变，一定要变就手动改可以结合v-once使用
 }

获取name和pswd后生成content

content:"用户名<input type='text' id='a_b_1' value='" + name + "'></br>密码<input type='text' id='a_b_2' value='" + pswd + "'>"

你完全没有领会vue的精髓，那就是界面和模型双向绑定，而不是自己去写，否则白用了。
看这个例子：https://www.cnblogs.com/Renyi-Fan/p/10002368.html