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

本是古典何须时尚 2023-06-12 06:25 8阅读 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>