需求
在日常开发中，经常会有计算或者拼接输入框内容，然后在另一个输入框呈现的场景，例如：计算器、拼接名称等等。
那么假定本次的需求是一个填写名称的需求，具有三个文本框：
-
姓氏 -
名称 -
姓名
其中 「姓名」 由 「姓氏」 + 「名称」，下面来实现一下。
示例
1.首先编写基本的HTML，呈现三个输入框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 1.导入vue.js库 -->
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- form>(label+input#input$+br)*3 -->
<form action="">
<label for="input1">姓氏：</label>
<input type="text" id="input1">
<br>
<label for="input2">名称：</label>
<input type="text" id="input2">
<br>
<label for="input3">姓名：</label>
<input type="text" id="input3">
<br>
</form>
</div>
<script>
// 2. 创建一个Vue的实例
var vm = new Vue({
el: '#app',
data: {
},
methods: {
},
});
</script>
</body>
</html>
浏览器显示如下：
2.给三个文本框的值使用v-model定义到data中
浏览器确认是否接收到了value，如下：
可以看到data的值已经与文本框对应上了。
3.给文本框设置keyup事件监听，并且修改fullname的值
在浏览器输入内容，确认效果：
交流QQ群：
点击下面，查看更多Vue系列文章
原文始发于微信公众号（海洋的渔夫）：50. Vue名称案例-使用keyup事件监听
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/32691.html
