<template>
<div class="greetings">
</div>
</template>
<script>
import { ref, computed } from "vue"
export default {
name: "HelloWorld",
setup() {
const count = ref(4);
const val = ref(0)
const plusOne = computed({
get: () => count.value + 1,
set: (val) => {
count.value = val - 1
},
})
console.log(val)
console.log(count)yon
console.log(plusOne)
console.log(count.value)
console.log(plusOne.value)
console.log(val.value)
return {
count,
val,
plusOne
}
}
}
</script>
<style scoped>
h1 {
font-weight: 500;
font-size: 2.6rem;
top: -10px;
}
h3 {
font-size: 1.2rem;
}
.greetings h1,
.greetings h3 {
text-align: center;
}
@media (min-width: 1024px) {
.greetings h1,
.greetings h3 {
text-align: left;
}
}
</style>
<template>
<div class="greetings">
</div>
</template>
<script>
import { ref, computed } from "vue"
export default {
setup() {
const count = ref(1)
const doubleCount = computed({
get: () => count.value * 2,
set: (value) => {
count.value = value / 2
},
})
console.log(doubleCount.value) // 输出2
doubleCount.value = 6
console.log(count.value) // 输出3
return {
count,
doubleCount,
}
},
}
</script>
<style scoped>
h1 {
font-weight: 500;
font-size: 2.6rem;
top: -10px;
}
h3 {
font-size: 1.2rem;
}
.greetings h1,
.greetings h3 {
text-align: center;
}
@media (min-width: 1024px) {
.greetings h1,
.greetings h3 {
text-align: left;
}
}
</style>
第一个更正为
<template>
<div class="greetings">
</div>
</template>
<script>
import { ref, computed } from "vue"
export default {
name: "HelloWorld",
setup() {
const count = ref(1)
const plusOne = computed({
get: () => count.value + 1,
set: (value) => {
count.value = value - 1
},
})
console.log(count.value)
console.log(plusOne.value)
return {
count,
plusOne
}
}
}
</script>
<template>
<div class="greetings">
</div>
</template>
<script>
import { ref, computed } from "vue"
export default {
name: "HelloWorld",
setup() {
const count = ref(1);
const plusOne = computed({
get: () => count.value + 1,
set: (value) => {
count.value = value - 1
},
})
console.log(plusOne.value);
console.log(count.value);
plusOne.value = 4
console.log(plusOne.value)
return {
count,
plusOne
}
}
}
</script>
<style scoped>
h1 {
font-weight: 500;
font-size: 2.6rem;
top: -10px;
}
h3 {
font-size: 1.2rem;
}
.greetings h1,
.greetings h3 {
text-align: center;
}
@media (min-width: 1024px) {
.greetings h1,
.greetings h3 {
text-align: left;
}
}
</style>