Vue利用计算属性get和set拆分姓名

最新推荐文章于 2026-06-22 09:08:57 发布

原创最新推荐文章于 2026-06-22 09:08:57 发布 · 502 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Vue

当前文章被收录于：

Vue

44 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

直接复制代码，改Vue链接就好。

都有注释，简单易懂

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div class="demo">
			<p>姓名：<input type="text" v-model="fullName" /></p>
			<p>
				姓：<input type="text" v-model="firstName" />
				名：<input type="text" v-model="lastName" />
			</p>
		</div>
	</body>
	<script type="text/javascript">
		var demo = new Vue({
			el: ".demo",
			data: {
				firstName: '',
				lastName: '',
				fuxing: ['欧阳', '慕容', '司马']/* 复姓数组 */
			},
			computed: {
				fullName: {
					get: function() {
						return this.firstName + this.lastName/* 名加姓 */
					},
					set: function(newName) {

						if (newName == '') {
							 /* 如果不为空，就会出undefinde */
							newName = ''
						} else {
							/* 不是复姓*/
							var flag = 0
							var temp = newName.slice(0, 2)
							for (var i = 0; i < this.fuxing.length; i++) {
								if (temp == this.fuxing[i]) {
									/* 是复姓就执行 */
									flag = 1;
									break
								}
							}
							if (flag == 0) {
								/* 不是复姓*/
								this.firstName = newName[0]
								this.lastName = newName.slice(1)/* 不管名字几个字，都从第一个开始以后都是名字 */
							} else {
								/* 是复姓就执行 */
								this.firstName = temp
								this.lastName = newName.slice(2)/* 不管名字几个字，都从第二个开始以后都是名字 */
							}
						}

					}
				}
			}
		})
	</script>
</html>

标签

#计算属性