您的位置：首页 > 产品设计 > UI/UE

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

2017-11-21 13:09 1016 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航