vue的计算属性的set方法--几乎不用，了解就行

liu1992452008

于 2017-11-21 13:09:08 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： vuejs

本文链接：https://blog.youkuaiyun.com/liu1992452008/article/details/78570464

vuejs 专栏收录该内容

34 篇文章

订阅专栏

本文通过一个具体的Vue.js实例介绍了如何使用计算属性来简化数据操作，并展示了如何通过setter方法更新数据。该示例中，计算属性用于组合firstName和lastName属性形成fullName，并提供了setter方法来动态更新两个部分。

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

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="vue.js"></script>

	</head>
	<style type="text/css">
		#app {
			margin: 50px auto;
			width: 500px;
			
		}
		fieldset{
			border: 1px solid orange;
		}
		fieldset input{
			width: 400px;
			height: 30px;
			margin: 10px 0;
			
		}
		table{
			width: 500px;
			border: 1px solid orange;
			text-align: center;
			margin-top: 40px;
		}
		thead{
			background-color: orange;
			color: white;
		}
		button{
			width: 90px;
			height: 40px;
			background-color: rosybrown;
		}
	</style>

	<body>
		<div id="app">
          <p>{{fullName }}</p>
          <button  @click="deal()">调用计算属性的setter方法</button>
		</div>
			<script type="text/javascript">
				new Vue({
					el: '#app',
					data: {
						fistName:'zhang',
						lastName:'sanfeng'
					},
					methods:{
						deal(){
							this.fullName='Token Lily'
						}
					} ,
					computed:{
//						fullName(){
//							return this.fistName+this.lastName
//						}
                 fullName:{
                  	fullName(){
                 	return this.fistName+this.lastName
                 },
                   //set方法
                 set(str){
                  	 let nameArr=str.split('');
                  	 this.firstName=nameArr[0];
                  	 	 this.lastName=nameArr[1];
            alert(str)
                  	 
                 }
                  }
                 //get方法
                
               
					}
					
				})
			</script>
	</body>

</html>