<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="fun">
<select name="" id="" v-model="full">
<option>孙悟空</option>
<option>猪八戒</option>
<option>沙悟净</option>
</select>
<p>姓名：{{full}}</p>
<p>姓：{{firstName}}</p>
<p>名：{{lastName}}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#fun",
data: {
firstName: "孙",
lastName: "悟空"
},
computed: {
full: {
get() {
return this.firstName + this.lastName;
},
set(val) {
let fullName = val;
this.firstName = fullName[0];
this.lastName = fullName.slice(1,);
}
}
}
})
</script>
</html>
vue用computed获取姓和名
最新推荐文章于 2024-09-16 17:05:08 发布
本文通过一个简单的示例展示了Vue.js框架中双向数据绑定的实现方式。使用了HTML和JavaScript来创建一个下拉菜单，菜单选项为《西游记》中的人物，并通过Vue的v-model指令实时更新页面上显示的姓名、姓氏和全名。
扫一扫
658
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
