vue（计算属性set和get）

最新推荐文章于 2025-01-19 21:22:03 发布

小青龙8085

最新推荐文章于 2025-01-19 21:22:03 发布

阅读量583

点赞数

分类专栏： vue 前端

本文链接：https://blog.youkuaiyun.com/lbs311709000127/article/details/103167668

版权

前端同时被 2 个专栏收录

39 篇文章

订阅专栏

vue

35 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的双向数据绑定示例，展示了如何通过计算属性将输入框的值拆分为姓和名，并在输入时实时更新。通过这个例子，读者可以了解Vue.js的数据响应机制和计算属性的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
		<style>
			.active{
				color:red;
			}
			.line{
				color:blue;
			}
		</style>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="root">
			<h2>{{fullName}}</h2>
			姓名：<input :placeholder="placeholder" v-model="fullName"/>
			<br />
			<div style="margin-left: -60px;white-space: pre-wrap;">
            	姓:  <input :placeholder="placeholder" v-model="firstName"/>
		名:  <input :placeholder="placeholder" v-model="lastName"/>
			</div>
        </div> 
        <script>
            new Vue({
                el:"#root",
                data:{
					placeholder:"请输入一段文字",
					firstName:"",
					lastName:""
                },
				computed:{
                	fullName:{
                    	set:function(newValue){	
							const names=newValue.split(/[ ]+/);
							this.firstName=names[0];
							if(names[1])
								this.lastName=names[1];
							else
								this.lastName="";
						},
						get:function(){
							if(this.firstName=="")
								return ;
							else if(this.lastName=="")
								return this.firstName;
							else
							    return this.firstName+" "+this.lastName;
							
						}
                	}
				}
            })
        </script>
    </body>
</html>