标签：arr Vue firstname get lastname 计算 fullname 属性
插值语法实现
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="root">
姓: <input type="text" v-model="firstname"><br>
名: <input type="text" v-model="lastname"><br>
姓名：<span>
<!-- slice 截取firstname的前三位-->
{{firstname.slice(0,3)}}-{{lastname}}
</span>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
new Vue({
el:"#root",
data:{
firstname:"张",
lastname:"三"
}
})
</script>
</html>
methods语法实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="root">
姓: <input type="text" v-model="firstname"><br>
名: <input type="text" v-model="lastname"><br>
姓名：<span>
{{fullname()}}
</span>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
new Vue({
el:"#root",
data:{
firstname:"张",
lastname:"三"
},
methods:{
fullname(){
return this.firstname+'-'+this.lastname;
}
}
})
</script>
</html>
计算属性实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--
1 计算属性不存在，要通过已有属性计算出来
2 原理：底层借助了getter和setter
3 优势：与methods相比，内部有缓存机制（复用），效率更高，调试方便
-->
<body>
<div id="root">
姓: <input type="text" v-model="firstname"><br>
名: <input type="text" v-model="lastname"><br>
姓名：<span>
{{fullname}}
</span>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
const vm=new Vue({
el:"#root",
data:{
firstname:"张",
lastname:"三"
},
//计算属性
computed:{
fullname:{
// get有什么作用 当有人读取fullname时，get就会被调用，且返回值就会作为fullname的值
// get什么时候调用 1初次读取fullname时 2所依赖的数据发生变化时
get(){
return this.firstname+'-'+ this.lastname
},
//set什么时候调用 当fullname被修改时
set(name){
const arr=name.split('-');
this.firstname=arr[0];
this.lastname=arr[1];
}
}
}
})
</script>
</html>
计算属性简写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="root">
姓: <input type="text" v-model="firstname"><br>
名: <input type="text" v-model="lastname"><br>
姓名：<span>{{fullname}}</span>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
const vm=new Vue({
el:"#root",
data:{
firstname:"张",
lastname:"三"
},
//计算属性
computed:{
//完整写法
// fullname:{
//
// get(){
// return this.firstname+'-'+ this.lastname
// },
//
// set(name){
// const arr=name.split('-');
// this.firstname=arr[0];
// this.lastname=arr[1];
// }
// }
//简写 只考虑读取 不考虑修改 即没有set方法
fullname() {
return this.firstname+'-'+ this.lastname
}
}
})
</script>
</html>
标签：arr,Vue,firstname,get,lastname,计算,fullname,属性 来源： https://www.cnblogs.com/lustudy/p/15555590.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。