vue16-is属性

- 日理万妓 2022-05-10 00:52 221阅读 0赞

首先看下面代码：

  1. <!DOCTYPE html>
  2. <html lang=en>
  3.     <head>
  4.         <meta charset="utf-8"/>
  5.         <title>Hello world</title>
  6.         <script src="vue.js"></script>
  7.     </head>
  8.     <body>
  9.         <div id="root">
  10.             <table>
  11.                 <tbody>
  12.                     <row></row>
  13.                     <row></row>
  14.                     <row></row>
  15.                 </tbody>
  16.             </table>
  17.         </div>
  20.         <script>
  21.             Vue.component("row",{
  22.                 template:'<tr><td>this is a row</td></tr>'
  23.             })
  26.             var vm = new Vue({
  27.                el:"#root"
  28.             })
  30.         </script>
  31.     </body>
  32. </html>

渲染后会出现问题，看页面源码，tr标签会跑到table外面，这是因为row不是table中的标签，渲染时移到外面了。

70

解决办法，用is属性，指定组件就可以了

  1. <tr is="row"></tr>
  2.                     <tr is="row"></tr>
  3.                     <tr is="row"></tr>

发表评论

表情：
评论列表 （有 0 条评论，221人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Vue计算属性

    计算属性就是当其所依赖的属性的值发生变化的时候，这个属性的值会自动更新，与之相关的东西也会自己更新。计算属性可以完成各种复杂的逻辑，但是最终都要返回一个结果。计算属性可以依赖多

    本是古典 何须时尚本是古典 何须时尚/ 0 赞/ 413 阅读

    相关 vue监听属性

     监听属性 本章节，我们将为大家介绍 Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化。 以下实例通过使用 watch 实现计数器：

    た 入场券た 入场券/ 0 赞/ 438 阅读

    相关 Vue计算属性

    计算属性   模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如： <div id="example

    ￡神魔★判官ぃ￡神魔★判官ぃ/ 0 赞/ 506 阅读