我有一条消息说嘿。我想用在输入框中键入的值替换“那里”文本。
我尝试使用指令
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
}
}
});
页面加载
嘿,很高兴收到您的来信。
名称
在运行时
嗨,约翰,很高兴收到您的来信。
约翰
答案 0 :(得分:0)
您可以删除方法,因为您使用的是“ 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
希望它对您有用。
答案 1 :(得分:0)
我不确定在提交表单时是否可以填充表单数据。
如果要提交表单数据,则必须阻止(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>
您必须在需要的其他地方做同样的事情。