Vue利用计算属性get和set拆分姓名
程序员文章站
2022-05-17 10:11:14
...
直接复制代码，改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>
上一篇： VUE基础篇Part3（计算属性）
下一篇： 使用opencv旋转90、180、270