vue快速入门(十) 之 v-model双向数据绑定

简介: vue快速入门(十) 之 v-model双向数据绑定

v-model可以把表单数据传过来的值与代码中的值进行交互

<body>
    <div id="app">
        <h1>{{message}}</h1>
        <input type="text" v-model="message">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "hello"
            }
        })
    </script>
</body>

我们定义了message的值,并且通过v-model传给input,那么input里边就会显示message的值

同理如果我们修改input里边的值,那么message的值也会随着改变,

现在我们修改input的值

发现h1的message也会随着修改


我们再来加一个方法,mess

这样当我们回车的时候,就会弹出message的值

发现三个地方的值都是一样的


相关文章
|
2月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
279 2
|
24天前
|
缓存 JavaScript
vue中的keep-alive问题(2)
vue中的keep-alive问题(2)
248 137
|
4月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
374 1
|
4月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
213 0
|
JavaScript 前端开发 开发者
vue 的双向数据绑定的原理
vue 的双向数据绑定的原理
173 0
|
存储 设计模式 JavaScript
简单小示例彻底搞明白vue双向数据绑定核心原理
vue 很大的一个优势就是双向数据绑定,而在 react 或小程序中是需要我们自己手动 setState、setData 去修改视图数据
|
JavaScript 前端开发
vue相关面试题2:1.封装vue组件作用;2双向数据绑定原理;3.Router 是什么;4.导航钩子有哪些
它们有以下参数。 ●to::即将要进入的目标路由对象。 ●from:当前导航正要离开的路由。 ●next: 一定要用这个函数才能到达下一个路由,如果不用就会遭到拦截。
400 0
|
5月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
709 0
|
5月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能