后台传的字符串为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'>"

3个回答

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

function getContent()
 {
 var t=document.getElementById("a_b_1");
 t.value="修改文本内容" //获取值或者修改值
 //content不会变应为是单项绑定的也没必要变,一定要变就手动改可以结合v-once使用
 }
Jenneyhao
JenneyHao 谢谢您的回答,问题我已经解决了
10 个月之前 回复
Jenneyhao
JenneyHao 回复JenneyHao: 写错了$("#a_b_1").val()
10 个月之前 回复
Jenneyhao
JenneyHao 首先感谢您的回答,其次这个方法我当时也想过,只是用户在输入信息以后,我通过$('a_b_1').val()获取的值为undefined
10 个月之前 回复

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

Jenneyhao
JenneyHao 谢谢您的回答,问题我已经解决了
10 个月之前 回复
Jenneyhao
JenneyHao 回复贵阳老马马善福专业维修游泳池堵漏防水工程:v-html中的DOM元素怎么样绑定模型?有相关的例子么?
10 个月之前 回复
caozhy
贵阳老马马善福专业维修游泳池堵漏防水工程 回复JenneyHao: 你不应该直接操作输入框,而是应该让输入框绑定模型,操作模型
10 个月之前 回复
Jenneyhao
JenneyHao 首先感谢您的回答,其次我没太明白这个问题和双向绑定有什么关系,这个输入框不是直接写在页面上的,而是后台传过来的,我是通过V-HTML将其显示在页面上了,我遇到的问题是如何获取通过V-HTML显示的输入框的值。
10 个月之前 回复

获取name和pswd后生成content

content:"用户名<input type='text' id='a_b_1' value='" + name + "'></br>密码<input type='text' id='a_b_2' value='" + pswd + "'>"
Jenneyhao
JenneyHao 谢谢您的回答,问题我已经解决了
10 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问