vue页面展示保留原有格式

这里从后端获取页面内容，如果后端返回的有格式适用，否则需要用到富文本：
https://panjiachen.github.io/vue-element-admin-site/zh/feature/component/rich-editor.html

方法就是：

<div class="tastrule_center" v-html="integralRule"></div>

原本是

<div>{{integralRule}}</div>

现在写到v-html里面保留原来格式，并且再加一个样式class=“tastrule_center”，样式写在style中。而文本域本身都可以保留格式传给后端。

html:

<template>
    <div slot="setting">
      <el-button type="primary" @click="tastruleEdit">编辑</el-button>
    </div>
    <div class="tastrule_title">积分规则</div>
    <div class="tastrule_center" v-html="integralRule"></div>
</template>

数据模型：

data() {
    return {
      id: ""
      integralRule: "", //积分规则
      ruleDialogVisible: false,
      ruleForm: {
        textarea: "", //弹窗
      },
      rules: {
        textarea: [{ required: true, message: "请输入", trigger: "blur" }],
      },
    };
},

created：

created() {
   this.ruleContinuous();
},

methods：

//获取积分规则详情
ruleContinuous() {
  get("/sys/integral/sel").then((res) => {
    if (res.code === 200) {
      this.id = res.data.id;
      this.integralRule = res.data.integralRule;
    }
  });
},
//点击编辑，赋初始值
tastruleEdit() {
  this.ruleForm.textarea = this.integralRule;
  this.ruleDialogVisible = true;
},
//编辑规则
submitForm(ruleForm) {
   this.$refs[ruleForm].validate((valid) => {
     if (valid) {
       let parmas = {
         id: this.id,
         integralRule: this.ruleForm.textarea,
       };
       put("/sys/integral/update", parmas).then((res) => {
         if (res.code === 200) {
           this.$message.success("添加成功！");
           this.addSubCancle();
           this.ruleContinuous();
         } else {
           this.$message.error(res.message);
         }
       });
     }
   });
 },
//清空编辑弹窗
addSubCancle() {
  this.ruleDialogVisible = false;
  this.ruleForm.textarea = "";
},
//点击蒙层清空弹窗
handleClose(done) {
  this.ruleForm.textarea = "";
  done();
},

样式：

<style lang="less" scoped>
	@import "./Tastrule";
	.tastrule_title {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  font-size: 20px;
	  padding: 10px;
	}
	.tastrule_center {
	  color: #333333;
	  line-height: 30px;
	  white-space: pre-wrap;
	}
</style>