vue实现双向数据绑定 v-model

最新推荐文章于 2025-04-29 10:27:50 发布

原创最新推荐文章于 2025-04-29 10:27:50 发布 · 244 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue.js

当前文章被收录于：

vue.js

61 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍如何在 Vue.js 中使用 v-model 实现表单数据的双向绑定，通过修改左侧表单，右侧实时更新显示效果。

vue实现双向数据绑定

现在需求是左侧填写表单，右侧随时查看显示效果，下面是操作：

<!-- 表单 -->
      <el-form
        ref="form"
        :model="form"
        label-width="100px"
      >
        <el-form-item label="* 通知标题">
          <el-input
            v-model="form.title"
            placeholder="请输入通知标题"
          ></el-input>
        </el-form-item>
        <el-form-item label="* 通知内容">
          <el-input
            type="textarea"
            v-model="form.desc"
            placeholder="请输入通知内容"
          ></el-input>
        </el-form-item>
      </el-form>
		//显示表单填写的内容
        <div class="textContent">
          <p>{{ form.title }}</p>
          <p>{{ form.desc }}</p>
        </div>

JS:

export default {
  name: "messageform",
  data() {
    return {
      form: {
        title: "",
        desc: "",
      },
    }
  }
},
mounted() {
},
methods: {
 }