当前位置：首页 > VUE

vue 实现备注功能

2026-02-17 13:43:25VUE

Vue 实现备注功能的方法

数据绑定与表单输入

在Vue中实现备注功能，可以通过v-model实现双向数据绑定。创建一个简单的文本输入框或文本域，将用户输入的备注内容绑定到Vue实例的数据属性上。

<template>
  <div>
    <textarea v-model="remark" placeholder="请输入备注"></textarea>
    <button @click="saveRemark">保存备注</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      remark: ''
    }
  },
  methods: {
    saveRemark() {
      console.log('备注内容:', this.remark)
      // 这里可以添加保存逻辑
    }
  }
}
</script>

本地存储备注

如果需要持久化保存备注内容，可以使用localStorage或sessionStorage。在Vue的生命周期钩子中读取和保存数据。

export default {
  data() {
    return {
      remark: localStorage.getItem('userRemark') || ''
    }
  },
  methods: {
    saveRemark() {
      localStorage.setItem('userRemark', this.remark)
    }
  },
  mounted() {
    // 组件加载时读取存储的备注
    this.remark = localStorage.getItem('userRemark') || ''
  }
}

富文本编辑器集成

对于更复杂的备注需求，可以集成第三方富文本编辑器如Quill或TinyMCE。

安装Quill：

npm install quill

在Vue中使用：

<template>
  <div>
    <div ref="editor"></div>
    <button @click="getContent">获取备注内容</button>
  </div>
</template>

<script>
import Quill from 'quill'
import 'quill/dist/quill.snow.css'

export default {
  data() {
    return {
      editor: null,
      content: ''
    }
  },
  mounted() {
    this.editor = new Quill(this.$refs.editor, {
      theme: 'snow'
    })
  },
  methods: {
    getContent() {
      this.content = this.editor.root.innerHTML
      console.log(this.content)
    }
  }
}
</script>

与服务端交互

将备注数据保存到服务器，可以使用axios发送HTTP请求。

import axios from 'axios'

export default {
  methods: {
    async saveRemark() {
      try {
        const response = await axios.post('/api/remarks', {
          remark: this.remark
        })
        console.log('保存成功', response.data)
      } catch (error) {
        console.error('保存失败', error)
      }
    }
  }
}

备注列表展示

如果需要展示多个备注，可以使用v-for指令循环渲染备注列表。

vue 实现备注功能

<template>
  <div>
    <ul>
      <li v-for="(item, index) in remarks" :key="index">
        {{ item.content }}
        <button @click="deleteRemark(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      remarks: [
        { content: '第一次备注' },
        { content: '第二次备注' }
      ]
    }
  },
  methods: {
    deleteRemark(index) {
      this.remarks.splice(index, 1)
    }
  }
}
</script>