vue元件使用的細節 is 屬性

西門吃雪……發表於2020-10-25
Vue元件
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>元件使用中的細節點</title>
    <script src='./vue.js'></script>
</head>

<body>

    <div id="root">
        <table>
            <tbody>
                <tr>
                    <td>1</td>
                </tr>
                <tr>
                    <td>2</td>
                </tr>
                <tr>
                    <td>3</td>
                </tr>
            </tbody>
        </table>

    </div>

    <script>
        var vm = new Vue({})
    </script>

</body>

</html>

執行效果圖
在這裡插入圖片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>元件使用中的細節點</title>
    <script src='./vue.js'></script>
</head>

<body>

    <div id="root">
        <table>
            <tbody>
                <row></row>
                <row></row>
                <row></row>
            </tbody>
        </table>

    </div>

    <script>
        Vue.component('row', {
            template: '<tr><td>this is  a row</td> </tr>'
        })


        var vm = new Vue({})
    </script>

</body>

</html>

在這裡插入圖片描述
會發現 row 雖然列印出來了 但是卻沒有值

所以

var vm = new Vue({
            el: '#root'
        })

此時的整體程式碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>元件使用中的細節點</title>
    <script src='./vue.js'></script>
</head>

<body>

    <div id="root">
        <table>
            <tbody>
                <row></row>
                <row></row>
                <row></row>
            </tbody>
        </table>

    </div>

    <script>
        Vue.component('row', {
            template: '<tr><td>this is  a row</td> </tr>'
        })


        var vm = new Vue({
            el: '#root'
        })
    </script>

</body>

</html>

執行效果圖
在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述
問題得到了 解決

此時整體程式碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>元件使用中的細節點</title>
    <script src='./vue.js'></script>
</head>

<body>

    <div id="root">
        <table>
            <tbody>
                <tr is="row"></tr>
                <tr is="row"></tr>
                <tr is="row"></tr>

            </tbody>
        </table>

    </div>

    <script>
        Vue.component('row', {
            template: '<tr><td>this is  a row</td> </tr>'
        })


        var vm = new Vue({
            el: '#root'
        })
    </script>

</body>

</html>

    <div id="root">
        <table>
            <select>
                <option is="row"></option>
                <option is="row"></option>
                <option is="row"></option>

            </select>
        </table>

    </div>

使用 is 屬性可以解決 模板 出現問題

相關文章