feat: 更新
This commit is contained in:
dengtongyu committed
1 parent
b7c570661c
commit
96230447e4
15 files changed
+490
-133
No files matched your search
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<div>
|
||||
<p><input type="text" v-model="secondName" /></p>
|
||||
<p>{{ fullName }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const firstName = ref("张")
|
||||
const secondName = ref("三")
|
||||
const fullName = computed({
|
||||
get: () => {
|
||||
return `${firstName.value}${secondName.value}`
|
||||
},
|
||||
set: (value) => {
|
||||
secondName.value = value
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
input {
|
||||
height: 30px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div>
|
||||
<p><input type="number" v-model="number" /></p>
|
||||
<p>{{ amount }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
const number = ref(123456)
|
||||
const amount = computed(() => {
|
||||
return number.value.toLocaleString('zh', {
|
||||
style: 'currency',
|
||||
currency: 'CNY',
|
||||
minimumFractionDigits: 3
|
||||
});
|
||||
})
|
||||
// amount.value = "11111"
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
input {
|
||||
height: 30px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<div>
|
||||
<p>
|
||||
<select name="select" v-model="curPage">
|
||||
<option v-for="(item, index) in options" :key="index" :value="item.value">{{ item.label }}</option>
|
||||
</select>
|
||||
</p>
|
||||
<p>{{ res }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { watch, ref } from 'vue'
|
||||
const options = [
|
||||
{
|
||||
label: "第一页",
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: "第二页",
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: "第三页",
|
||||
value: 3
|
||||
},
|
||||
{
|
||||
label: "第四页",
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
label: "第五页",
|
||||
value: 5
|
||||
}
|
||||
]
|
||||
const curPage = ref(1)
|
||||
const res = ref("")
|
||||
watch(
|
||||
curPage,
|
||||
(newValue) => {
|
||||
const curItem = options.filter((item) => item.value === newValue)[0]
|
||||
res.value = `${curItem.label} 的数据`
|
||||
},
|
||||
// {immediate: true}
|
||||
)
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
select {
|
||||
height: 30px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div>
|
||||
<div ref="listDom">
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
<p>5</p>
|
||||
<p>6</p>
|
||||
</div>
|
||||
<br />
|
||||
<div ref="resDom"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
ref,
|
||||
watchEffect,
|
||||
// watchPostEffect
|
||||
} from 'vue'
|
||||
const listDom = ref<HTMLDivElement>()
|
||||
const resDom = ref<HTMLDivElement>()
|
||||
const selectElement = ref(3)
|
||||
|
||||
watchEffect(() => {
|
||||
const selectElem = listDom.value.querySelectorAll("p")[selectElement.value]
|
||||
resDom.value.append(selectElem)
|
||||
}, {
|
||||
flush: 'post'
|
||||
})
|
||||
|
||||
// watchPostEffect(() => {
|
||||
// const selectElem = listDom.value.querySelectorAll("p")[selectElement.value]
|
||||
// resDom.value.append(selectElem)
|
||||
// })
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less"></style>
|
||||
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div>
|
||||
<p>
|
||||
<select name="select" v-model="curPage">
|
||||
<option v-for="(item, index) in options" :key="index" :value="item.value">{{ item.label }}</option>
|
||||
</select>
|
||||
</p>
|
||||
<p>watch: {{ watchRes }}</p>
|
||||
<p>watchEffect: {{ watchEffectRes }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { watch, watchEffect, ref } from 'vue'
|
||||
const options = [
|
||||
{
|
||||
label: "第一页",
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: "第二页",
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: "第三页",
|
||||
value: 3
|
||||
},
|
||||
{
|
||||
label: "第四页",
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
label: "第五页",
|
||||
value: 5
|
||||
}
|
||||
]
|
||||
const curPage = ref(1)
|
||||
const watchRes = ref("")
|
||||
watch(
|
||||
curPage,
|
||||
(newValue) => {
|
||||
const curItem = options.filter((item) => item.value === newValue)[0]
|
||||
watchRes.value = `${curItem.label} 的数据`
|
||||
},
|
||||
)
|
||||
const watchEffectRes = ref("")
|
||||
watchEffect(() => {
|
||||
const curItem = options.filter((item) => item.value === curPage.value)[0]
|
||||
watchEffectRes.value = `${curItem.label} 的数据`
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
select {
|
||||
height: 30px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<div>
|
||||
<p>
|
||||
<select name="select" v-model="curPage">
|
||||
<option v-for="(item, index) in options" :key="index" :value="item.value">{{ item.label }}</option>
|
||||
</select>
|
||||
</p>
|
||||
<p>{{ watchEffectRes }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { watchEffect, ref } from 'vue'
|
||||
const options = [
|
||||
{
|
||||
label: "第一页",
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: "第二页",
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: "第三页",
|
||||
value: 3
|
||||
},
|
||||
{
|
||||
label: "第四页",
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
label: "第五页",
|
||||
value: 5
|
||||
}
|
||||
]
|
||||
const curPage = ref(1)
|
||||
const watchEffectRes = ref("")
|
||||
watchEffect((onInvalidate) => {
|
||||
const curItem = options.filter((item) => item.value === curPage.value)[0]
|
||||
watchEffectRes.value = `${curItem.label} 的数据`
|
||||
console.log('watchEffect副作用函数执行了！')
|
||||
onInvalidate(() => {
|
||||
console.log("onInvalidate清除副作用函数执行了！")
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 清除副作用函数特点
|
||||
// 副作用函数初始化执行时，清除副作用函数不执行。
|
||||
// 侦听变化触发副作用函数都会执行一次清除副作用函数。
|
||||
// 清除副作用函数优先于副作用函数执行。
|
||||
// 组件被销毁的时候清除副作用函数再次执行。
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
select {
|
||||
height: 30px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<div>
|
||||
<p>
|
||||
<select name="select" v-model="curPage.page">
|
||||
<option v-for="(item, index) in options" :key="index" :value="item.value">{{ item.label }}</option>
|
||||
</select>
|
||||
<!-- <input type="number" v-model="curPage.limit" /> -->
|
||||
</p>
|
||||
<p>{{ res }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { watch, reactive, ref } from 'vue'
|
||||
const options = [
|
||||
{
|
||||
label: "第一页",
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: "第二页",
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: "第三页",
|
||||
value: 3
|
||||
},
|
||||
{
|
||||
label: "第四页",
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
label: "第五页",
|
||||
value: 5
|
||||
}
|
||||
]
|
||||
const curPage = reactive({
|
||||
page: 1,
|
||||
limit: 10
|
||||
})
|
||||
const res = ref("")
|
||||
watch(
|
||||
// curPage.page,
|
||||
() => curPage.page,
|
||||
(newValue) => {
|
||||
const curItem = options.filter((item) => item.value === newValue)[0]
|
||||
res.value = `${curItem.label} 的数据`
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
|
||||
// watch(
|
||||
// () => curPage,
|
||||
// (newValue) => {
|
||||
// const curItem = options.filter((item) => item.value === newValue.page)[0]
|
||||
// res.value = `${curItem.label} 的 ${newValue.limit} 条数据`
|
||||
// },
|
||||
// {
|
||||
// immediate: true,
|
||||
// deep: true
|
||||
// }
|
||||
// )
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
select,input {
|
||||
height: 30px;
|
||||
padding: 0 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div>
|
||||
<p>
|
||||
<select name="select" v-model="curPage">
|
||||
<option v-for="(item, index) in options" :key="index" :value="item.value">{{ item.label }}</option>
|
||||
</select>
|
||||
<button @click="watchStop">停止侦听</button>
|
||||
</p>
|
||||
<p>{{ res }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { watch, ref } from 'vue'
|
||||
const options = [
|
||||
{
|
||||
label: "第一页",
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: "第二页",
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: "第三页",
|
||||
value: 3
|
||||
},
|
||||
{
|
||||
label: "第四页",
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
label: "第五页",
|
||||
value: 5
|
||||
}
|
||||
]
|
||||
const curPage = ref(1)
|
||||
const res = ref("")
|
||||
const stop = watch(
|
||||
curPage,
|
||||
(newValue) => {
|
||||
const curItem = options.filter((item) => item.value === newValue)[0]
|
||||
res.value = `${curItem.label} 的数据`
|
||||
}
|
||||
)
|
||||
|
||||
const watchStop = () => {
|
||||
stop()
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
select,
|
||||
button {
|
||||
height: 30px;
|
||||
padding: 0 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user