vue 动态插入渲染html

概述<template> <div> <el-row type="flex" justify="center"> <el-col :span="16"> <el-card> <el-form :v-model="form" ref="form" :rules="rule" label-width="100px">

<template>  <div>    <el-row type="flex" justify="center">      <el-col :span="16">        <el-card>          <el-form :v-model="form" ref="form" :rules="rule" label-wIDth="100px">            <el-form-item label="newHTML" prop="newHTML">              <el-input v-model="form.newHTML" type="input"/>            </el-form-item>            <el-form-item label="newTemplate" prop="newTemplate">              <el-input v-model="form.newTemplate" type="textarea" :rows="10"/>            </el-form-item>          </el-form>        </el-card>      </el-col>    </el-row>    <el-row type="flex" justify="center">      <el-col :span="16">        <el-card header=‘newHTML‘ class="vHTML-area">          <div v-HTML="form.newHTML">            <span class="HTML-class">old word</span>          </div>        </el-card>        <el-card header=‘newTemplate‘ class="vHTML-area">          <div ID="demo">            <!-- <div v-for="item in data" :key="item.name">              <div>                <span>{{ item.name }}</span>                <span>{{ item.age }}</span>                <span>{{ item.favorite }}</span>              </div>            </div>-->          </div>        </el-card>      </el-col>    </el-row>  </div></template><script>import Vue from "vue";export default {  name: "HelloWorld",data() {    var check = (rule,value,callback) => {      this.change();    };    return {      form: {        newHTML: ‘‘,newTemplate: `1`      },rule: {        newTemplate: [{ valIDator: check,trigger: "change" }],}        };  },methods: {    change() {      var MyComponent = Vue.extend({        template: `<div>${this.form.newTemplate}</div>`,data() {          return {            data: [              {                name: "张三",age: "18",favorite: "sleep"              },{                name: "李四",age: "20",favorite: "football"              },{                name: "王二",age: "30",favorite: "eating"              },{                name: "麻子",age: "40",favorite: "honghong"              }            ]          };        }      });      var component = new MyComponent().$mount();      var dom = document.querySelector("#demo");      while (dom.hasChildNodes()) {        dom.removeChild(dom.firstChild);      }      dom.appendChild(component.$el);    }  }};</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>.vHTML-area {  min-height: 200px;  margin-top: 20px;}.HTML-class{  color: red;}</style>

总结

以上是内存溢出为你收集整理的vue 动态插入渲染html全部内容，希望文章能够帮你解决vue 动态插入渲染html所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。