vue5: is规避错误 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <table border="1">
        <thead>
            <th>id</th>
        </thead>
        <tbody>
            <tr is="tr-demo"></tr>
            <tr is="demo-key"></tr>
        </tbody>
    </table>
<!-- 如果标签的内部标签用组件完成，需要is标签   -->
<!--组件化时，如果一个元素是由多个标签组成的，比如select,table,内部
标签想组件化，不可以直接使用组件，需要用is属性，指定组件-->

<!--    <tr-demo></tr-demo>-->
</div>

<script src="js/vue.js"></script>
<script>
    Vue.component('tr-demo',{
        template:'<tr><td>1</td></tr>'
    })
    new Vue({
        el:'#app',
        data:{},
        methods:{},
        // 局部组件
        components:{
            'demo-key':{
                template: "<h1 @click='change'>{{msg}}</h1>",
                data:function () {
                    return{
                        msg:0
                    }
                },
                methods:{
                    change:function () {
                        this.msg++
                    }
                }
            }
        }
    })
</script>
</body>
</html>

 

posted @ 2020-07-24 06:35  LDM_datos  Views(157)  Comments(0)    收藏  举报