VUE框架Vue3使用watch的方法实现延迟显示------VUE框架

旧约Alatus

已于 2023-12-31 20:08:32 修改

阅读量665

点赞数 6

分类专栏： # VUE框架前端文章标签：前端 javascript ecmascript vue.js 前端框架 vue js

于 2023-12-31 10:59:07 首次发布

本文链接：https://blog.csdn.net/2201_75960169/article/details/135314046

版权

前端同时被 2 个专栏收录

334 篇文章 2 订阅

订阅专栏

VUE框架

250 篇文章 0 订阅

订阅专栏

文章介绍了如何在Vue应用中使用`v-model`和`watch`以及`ref`来实现实时输入更新，展示了在组件间共享和监听属性值的基本用法。

摘要由CSDN通过智能技术生成

<template>
    <input type="text" v-model="name"/>
    <br>
    {{ newName }}
</template>

<script>
import inputName from "./hooks/inputName.js";
import getName from "./hooks/getName.js";
export default {
    name : "App",
    setup(){
        let name = inputName();
        let newName = getName(name);
        return {name,newName};
    }
}
</script>

<style>

</style>
<template>

<input type="text" v-model="name"/>

<br>

{{ newName }}

</template>

<script>

import inputName from "./hooks/inputName.js";

import getName from "./hooks/getName.js";

export default {

name : "App",

setup(){

let name = inputName();

let newName = getName(name);

return {name,newName};

}

}

</script>

<style>

</style>

import {ref,watch} from "vue";
export default function(name){
    let newName = ref(name.value);
    watch(name,(newValue) => {
        // 侦听属性
        setTimeout(() => {
            newName.value = newValue;
        },1000);
    });
    return newName;
}
import {ref,watch} from "vue";

export default function(name){

let newName = ref(name.value);

watch(name,(newValue) => {

// 侦听属性

setTimeout(() => {

newName.value = newValue;

},1000);

});

return newName;

}

import {ref} from "vue";
export default function(){
    let name = ref("");
    return name;
}
import {ref} from "vue";

export default function(){

let name = ref("");

return name;

}