<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script src="js/vue.js"></script>
<style>
.bread{
width: 90%;
height: 50px;
border-bottom: 1px solid #000;
margin: 0 auto;
line-height: 50px;
}
.hot{
color: red;
border-bottom-color: red;
}
</style>
</head>
<body>
<div id="app">
<bread aa="首页 > 图片列表 > 用户列表"></bread>
</div>
<script>
Vue.component('bread',{
template:'<div class="bread" :class="{hot:bool}" @click="fnChange"><div>当前位置：{{ aa }}</div></div>',
props:['aa'],
data:function(){
return {
bool:false
}
},
methods:{
fnChange:function(){
this.bool = !this.bool
}
}
})
var vm = new Vue({
el:'#app'
})
</script>
</body>
</html>
![前端之Vue.js库的使用[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)