Question

我有一条消息说嘿。我想用在输入框中键入的值替换“那里”文本。

我尝试使用指令

HTML

<div id="updateName">
<!--form sec-->
<section class="animated container-fluid align-center sec-ptop">
<h3 class="salutation">Hey <span>{{inputName}}There</span>, happy to hear from you.</h3>
<div>
<form name="contactform" method="post" class="row form-horizontal" role="form">
<div class="form-group input--josh col-sm-6">
<div class="input-wrap">
<input autocomplete="off" v-init type="text" v-model="inputName" class="form-control input__field input input__field--josh" id="inputName" name="inputName" placeholder="Name" value="" required />
<label class="input__label input__label input__label--josh input__label--josh-color-1 input__label--josh input__label--josh-color-1"></label>
</div>
</div>
</form>
</div>
</section>
</div>

vue

var app = new Vue({
    el: '#updateName',
    data: {
        inputName: 'There'
    },
    directives: {
        init: {
            bind(el){
                el.value = el.getAttribute('value');
                el.dispatchEvent(new Event('input'));
            }
        }
    },
});

HTML

<div id="updateName">
<!--form sec-->
<section class="animated container-fluid align-center sec-ptop">
<h3 class="salutation">Hey <span>{{inputName}}There</span>, happy to hear from you.</h3>
<div>
<form name="contactform" method="post" class="row form-horizontal" role="form">
<div class="form-group input--josh col-sm-6">
<div class="input-wrap">
<input autocomplete="off" type="text" v-model="inputName" v-on:keyup.enter="replaceText(inputValue)" class="form-control input__field input input__field--josh" id="inputName" name="inputName" placeholder="Name" required />
<label class="input__label input__label input__label--josh input__label--josh-color-1 input__label--josh input__label--josh-color-1"></label>
</div>
</div>
</form>
</div>
</section>
</div>

vue

var app = new Vue({
    el: '#updateName',
    data: {
        inputName: 'There'
    },
    methods: {
        replaceText: function(inValue) {
            this.inputName = this.inputName + inValue           
        }
    }
});

页面加载

嘿，很高兴收到您的来信。

名称

在运行时

嗨，约翰，很高兴收到您的来信。

约翰

运行时

Answer 1

您可以删除方法，因为您使用的是“ v-model”，即表示如果输入更改，则数据也将更改。

如果您不需要更改名称，也可以删除span标签，并在span中删除静态的“ There”。

<h3 class="salutation">Hey <span>{{inputName}}</span>, happy to hear from you.</h3>

与

相同

<h3 class="salutation">Hey {{inputName}}, happy to hear from you.</h3>

这里是fiddle

希望它对您有用。

Answer 2

我不确定在提交表单时是否可以填充表单数据。

如果要提交表单数据，则必须阻止（event.preventdefault）表单数据并将其保存到另一个变量中。

但是，如果您不需要提交表单，则可以使用下面的示例代码来实现

<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>  

    <div id='myApp'>
        <h3 class="myName">Hey <span v-if='inputName.length'>{{inputName}}</span> <span v-else>There</span>, happy to hear from you.</h3>
        <form method="post"> 
            <input autocomplete="off" type="text" v-model="inputName" class="form-control" id="inputName" name="inputName" placeholder="Name" />
        </form>

    </div>

</body>
</html>
<script type="text/javascript">
    var myInstance = new Vue({
        el:'#myApp',
        data:{
            inputName : ''
        }

    })
</script>

您必须在需要的其他地方做同样的事情。

如何在不设置输入值的情况下用输入字段的值替换<span>标记的HTML内容

2 个答案: