v-runtme-template的简单应用

最新推荐文章于 2023-09-18 07:32:59 发布

简简遇单单

最新推荐文章于 2023-09-18 07:32:59 发布

阅读量1.3k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/zzulisboy/article/details/85004169

版权

vue 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

<template>
  <div>
    <el-input v-model="template" type="textarea" :rows="10"/>
    <div>
      <v-runtime-template :template="template"></v-runtime-template>
    </div>
  </div>
</template>

<script>
import VRuntimeTemplate from "v-runtime-template";

export default {
  data: () => ({
    name: "Mellow",
    data: [
      {
        name: "张三",
        age: "18",
        favorite: "sleep"
      },
      {
        name: "李四",
        age: "20",
        favorite: "football"
      },
      {
        name: "王二",
        age: "30",
        favorite: "eating"
      },
      {
        name: "麻子",
        age: "40",
        favorite: "honghong"
      }
    ],
    template: `
            <div>
              <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>
            `
  }),
  components: {
    VRuntimeTemplate
  }
};
</script>