1.  
  2. 主页
  3.  / 
  4. Vue教程
  5.  / 
  6. Vue教程之 is 语法

Vue教程之 is 语法

Vue 中有一个 is 的特性,虽然在平时的开发中,用的比较少,甚至说根本用不到,但是还是需要了解记录一下的,避免遇到 is 的使用场景的时候,不知道有这个东西。

由于 html 模板的限制,导致一些标签不能直接使用常规的方式进行封装,因此就诞生了 is 语法,来解决此类问题。

下面我们就说一下 is 语法的使用场景,以及在某些情况下如果不使用会造成的问题。

演示如下:

demo1.vue

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="vue.js"></script>
</head>
<body>
  <div id="app">
    <table>
      <tbody>
        <user-list v-for="item of list" :item="item"></user-list>
      </tbody>
    </table>
  </div>
</body>
<script>
  Vue.component("user-list", {
    props: ['item'],
    template: "<tr><td>{{ item.id }}</td><td>{{ item.name }}</td></tr>"
  })

  var vm = new Vue({
    el: "#app",
    data: {
      list: [
        {id: 1, name: "lanyulei"}
      ]
    }
  })
</script>
</html>

通过运行上面的代码,我们发现,如下图所示的情况:

Vue教程之 is 语法

我们发现如果使用组件的方式封装 tr 标签,然后在 tbody 中使用这个组件的话,就会导致 tr 的父级是不是 tbody,但是由于 html 的语法限制,tbody 下必须是 tr 标签,因此,在这种情况下,我们就可以通过 is 语法来修复这个问题,如下代码:

<table>
  <tbody>
    <tr is="user-list" v-for="item of list" :item="item"></tr>
  </tbody>
</table>
Vue教程之 is 语法

需注意:经测试,在 vue-cli4 生成的代码中进行开发的话,不会出现这种问题。

标签
这篇文章对您有用吗?

我们要如何帮助您?

发表评论

您的电子邮箱地址不会被公开。