I made a Vue.js component:
//nav.js
Vue.component("nav-ul-li", {
props:["url"],
template: "<li> <a :href="url"><slot></slot></a> </li>"
})
wrote a document:
<!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">
<!--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: "-sharpframe",
data: {
datas: [
{ title: "Test Data" , src: "-sharp"},
{ title: "Test Data" , src: "-sharp"},
{ title: "Test Data" , src: "-sharp"},
{ title: "Test Data" , src: "-sharp" }
]
}
})
</script>
</body>
</html>
as a result, < nav-ul-li vsway for = "data in datas": href= "data.src" > {{data.title}} < / nav-ul-li > is parsed into TAT:
<li href="-sharp"><a>Test Data</a></li>
Why did the href attribute I left for the a tag be robbed of TAT? by the li tag