Vue：:is特性详解和示例

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

今天在阅读Vue教程的时候，读到“解析DOM模板时的注意事项”这一节，看到:is特性——就是有些元素内部不能使用自定义标签或者自定义标签内也不能放某些特殊的标签，这时候就要用is代替一下，让html语法符合规则验证。is属于指定要在内部使用的标签。

文档链接：https://cn.vuejs.org/v2/guide/components.html

教程里面是这么解释的：

看完之后能感觉到就是想要把blog-post-row的内容放在table中的tr标签中，是通过:is特性来进行使用的。但是感觉不知道具体怎么用，那就下面的这个示例再直观的感受一下：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <div id="app1">
      <el-table :data="tableData">
        <el-table-column is="blog_post_row"></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {},
  components: {
    blog_post_row: {
      template: `
      <div>
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址" width="180"></el-table-column>
      </div>
      `
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

以上是 Vue：:is特性详解和示例 的全部内容， 来源链接： utcz.com/z/378621.html

回到顶部