vue-cli中默认是/,
所以放在非根目录下打包的js和css等静态文件的路径就会出错。
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a{display: block}
</style>
</head>
<body>
<div>
<a v-for="(index,item) in items" data-index="{{index}}" v-on:click="onclick" href="http://www.baidu.com">{{ item.text }}</a>
</div>
<input type="text" name="" id="index" value=""/>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el: 'body',
data: {
items: [
{ text: '巴士' },
{ text: '快车' },
{ text: '专车' },
{ text: '顺风车' },
{ text: '出租车' },
{ text: '代驾' }
]
},
methods: {
onclick:function(event){
event.preventDefault()
let target = event.target
console.log(target.getAttribute("data-index"))
document.getElementById('index').value = target.getAttribute("data-index")
}
}
})
</script>
</body>
</html>
你的意思是不确定有多少级么??可以参考一下例子
http://codepen.io/Zemistr/pen/ZYgrvK
http://jsfiddle.net/yyx990803/2caRm/
都是一个意思,就是必须最少要有一个组件 , 然后里面再套这个组件实现递归..就可以无限级了
当然,如果能确定最多有多少级,直接写html就好了