vue实例下的computed什么时候执行？

最新推荐文章于 2023-12-17 08:00:00 发布

原创最新推荐文章于 2023-12-17 08:00:00 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

前端同时被 2 个专栏收录

46 篇文章

订阅专栏

html

46 篇文章

订阅专栏

本文通过一个简单的Vue.js代码示例展示了如何在输入框中输入内容时实时更新显示的姓名。当`xing`和`ming`的数据发生变化时，`fullName`会自动更新。这得益于Vue.js的响应式数据绑定和计算属性，使得视图能够实时反映数据的变化。

部署运行你感兴趣的模型镜像

初始化的时候执行和相关的data发生变化后执行。
举个例子，当我修改第一行和第二行时，第三行就会发生改变。
改变前：
在这里插入图片描述
改变后：

代码：

<form id="app" action="">
    <div>
        <label>姓
            <input type="text" placeholder="请输入你的姓" v-model="xing">
        </label>
    </div>
    <div>
        <label>名
            <input type="text" placeholder="请输入你的名" v-model="ming">
        </label>
    </div>
    <div>
        <label>姓名
            <input placeholder="请输入你的姓名" type="text" v-model="fullName">
        </label>
    </div>
</form>


 new Vue({
        el: '#app',
        data: {
            xing: '王',
            ming:'小明'
        },
        computed:{
            fullName(){
                return this.xing+this.ming;
            }
        }
    });

您可能感兴趣的与本文相关的镜像