【vue】vue给div赋值（通过v-html给vue组件中的div赋值）

前言

近期在项目中遇到一个比较常见的需求，需要把富文本内容展示在vue页面中，当时的想法是用一个第三方富文本编辑器进行展示，后来发现是否可以通过一个div把内容展示出来，经过测试可以通过v-html=变量或方法对div直接赋值

 示例

parentContent为变量

 data() {
    return {
      form: this.$store.state.newsitem,
      parentContent: this.$store.state.newsitem.content,
    };
  },

div中使用v-html 

 <el-form-item label="Content">
      <el-card title="新闻内容">
        <div id="DivContent" v-html="parentContent"></div>
      </el-card>
    </el-form-item>

完整代码

<template>
  <el-form ref="form" :model="form" label-width="120px">
    <el-form-item label="Id">
      <el-input v-model="form.id"></el-input>
    </el-form-item>
    <el-form-item label="Title">
      <el-input v-model="form.title"></el-input>
    </el-form-item>
    <el-form-item label="Content">
      <el-card title="新闻内容">
        <div id="DivContent" v-html="parentContent"></div>
      </el-card>
    </el-form-item>
    <el-form-item label="Content">
      <Editor v-bind:content="parentContent" @childemit="parentEvent"></Editor>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">Create</el-button>
      <el-button type="primary" @click="onCancel">Cancel</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import Editor from "@/components/VueEditor";
export default {
  components: {
    Editor,
  },
  created() {

  },
  data() {
    return {
      form: this.$store.state.newsitem,
      parentContent: this.$store.state.newsitem.content,
    };
  },
  methods: {
    parentEvent(data) {
      this.parentContent = data;
    },
    onSubmit() {
      let form = this.form;

      const restweburl = "http://localhost:5000/";
      const requestOptions = JSON.stringify({
        id: form.id,
        title: form.title,
        publishDate: "2020-10-10",
        pageUrl: form.pageUrl,
        content: this.parentContent,
        author: null,
      });
      console.log(requestOptions);

      /*
      this.$axios
        .post(restweburl + "api/Article/UpdateNews", requestOptions)
        .then(function (res) {
          console.log(res);
        })
        .catch(function (err) {
          console.log(err);
        });
      console.log("submit!");*/
    },
    onCancel() {
      this.$router.push({ path: "/" });
    },
  },
};
</script>

<style>
</style>