在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ vue.js的組件模板里面的子元素屬性被解析到根元素QAQ

vue.js的組件模板里面的子元素屬性被解析到根元素QAQ

我做了醬紫一個(gè)Vue.js的組件：

//nav.js文件的代碼
Vue.component('nav-ul-li', {
    props:["url"],
    template: '<li>    <a :href="url"><slot></slot></a>    </li>'
})

寫了醬紫一個(gè)文檔：

<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test Document</title>
<script src="/js/vue.js"></script>
<script src="/js/nav.js"></script>
</head>
<body>
    <div id="frame">
        <nav id="top">
            <ul class="nav_top">
            <!--就是這個(gè)AAA-->
                <nav-ul-li v-for="data in datas"  :href="data.src">{{data.title}}</nav-ul-li>
            </ul>
        </nav>
    </div>
    <script>
    var Crowdfunding = new Vue({
        el: '#frame',
        data: {
            datas: [
                { title: 'Test Data' , src: "#"},
                { title: 'Test Data' , src: "#"},
                { title: 'Test Data' , src: "#"},
                { title: 'Test Data' , src: "#" }
            ]
        }
    })
    </script>
</body>
</html>

結(jié)果，<nav-ul-li v-for="data in datas" :href="data.src">{{data.title}}</nav-ul-li>被解析成醬紫TAT：

<li href="#"><a>Test Data</a></li>

它的我給a標(biāo)簽留的href屬性為什么會被li標(biāo)簽搶走TAT???

回答
編輯回答
檸檬藍(lán)

li表示這個(gè)鍋它不背，因?yàn)槟銈鹘onav-ul-li組件的prop是href，而組件內(nèi)部定義的props是url。

這樣改一下就好了：

<nav-ul-li v-for="data in datas"  :url="data.src">{{data.title}}</nav-ul-li>
2018年4月2日 16:57