Vue - 使用div模拟input框，并实现vue双向绑定

最新推荐文章于 2024-05-14 06:51:29 发布

风轻轻~

最新推荐文章于 2024-05-14 06:51:29 发布

阅读量1.1k

点赞数 1

分类专栏： # Vue__常用方法 # 前端基础__HTML + CSS 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/Jie_1997/article/details/126746461

版权

Vue__常用方法同时被 2 个专栏收录

12 篇文章 5 订阅

订阅专栏

前端基础__HTML + CSS

9 篇文章 0 订阅

订阅专栏

Vue - 使用div模拟input框，并实现vue双向绑定

利用 contenteditable 属性，该属性设置为true可以使div内容进行编辑

<template>
  <div class="page">
    <div class="row">
      <div>数据1：</div>
      <div
        class="inner"
        contenteditable
        v-text="valueObj.value1"
        @blur="setValue('valueObj', 'value1', $event.target.innerHTML)"
      ></div>
    </div>
    <div class="row">
      <div>数据2：</div>
      <div
        class="inner"
        contenteditable
        v-text="valueObj.value2"
        @blur="setValue('valueObj', 'value2', $event.target.innerHTML)"
      ></div>
    </div>
  </div>
</template>
<script>
// 引入qrcode
export default {
  data() {
    return {
      valueObj: {
        value1: "",
        value2: ""
      }
    };
  },
  methods: {
    setValue(obj, field, val) {
      this[obj][field] = val;
    }
  }
};
</script>

<style scoped>
.page {
  padding: 10px;
  box-sizing: border-box;
}
.row {
  display: flex;
  margin-bottom: 10px;
}
.inner {
  border: 1px solid #bbb;
  width: 100px;
  padding: 3px;
}
</style>