<template>
<h1>Vue3.0 computed计算属性</h1>
<div class="test">
<h2>输入</h2>
<div>姓氏:<input type="text" placeholder="请输入姓氏" v-model="user.firstName" /></div>
<div>名字:<input type="text" placeholder="请输入名字" v-model="user.lastName" /></div>
</div>
<div class="test">
<h2>展示</h2>
<div>姓名:<input type="text" placeholder="显示姓名" v-model="fullName1"></div>
<div>姓名:<input type="text" placeholder="显示姓名" v-model="fullName2"></div>
<div>姓名:<input type="text" placeholder="显示姓名" v-model="fullName3"></div>
</div>
</template>
<style scoped>
a {
color: #42b983;
}
.test {
width: 300px;
height: 200px;
border: 0.3rem dotted #2C3E50;
margin: 0 auto;
}
</style>
<script>
import {
watch,
ReactiveEffect,
reactive,
computed
} from 'vue';
//监听输入的值{firstName,lastName}得改变
export default {
name: "HelloWorld",
setup() {
const user = reactive({
firstName: "上官",
lastName: "婉儿"
})
//第一个值
const fullName1 = computed(() => {
return user.firstName + "_" + user.lastName
})//仅仅改变姓氏/名字时fullName1会改变
//第二个值
const fullName2 = computed({
get() {
return user.firstName + "_" + user.lastName;
},
set(newVal) {
console.log(newVal);
var arr = newVal.split('_');
user.lastName = arr[1];
user.firstName = arr[0];
}
})//改变姓氏/名字或改变fullName2时双发都会变化
// const fullName3 = (function(){
// return computed({
// get() {
// return user.firstName + "_" + user.lastName;
// },
// set(newVal) {
// console.log(newVal);
// var arr = newVal.split('_');
// user.lastName = arr[1];
// user.firstName = arr[0];
// }
// })
// })();
//第三个值
const fullName3 = new ReactiveEffect(()=>{
return user.firstName+"_"+user.lastName;
}).run();
//不管怎么改变双方都不会变化
console.log(fullName3);
return {
user,
fullName1,
fullName2,
fullName3
}
},
}
</script>
Vue3.0 computed计算属性使用方法
最新推荐文章于 2024-07-24 22:25:19 发布