<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#app{
width: 200px;
margin: 100px auto;
padding: 50px;
border: 2px solid black;
}
#app p{
color: red;
text-align: center;
font-size: 20px;
}
</style>
</head>
<body>
<div id="app">
<p>首页</p>
<!--<input type="button" value="公告" :show1/>
<input type="button" value="规则" />-->
<span id="g-gao" @click="show1">公告</span>
<span id="g-ze" @click="show2">规则</span>
<span id="l-tan" @click="show1">论坛</span>
<span id="a-quan" @click="show2">安全</span>
<span id="g-yi" @click="show2">安全</span>
<g-gao :bol="bol"></g-gao>
<g-ze :bol="bol"></g-ze>
</div>
</body>
<script type="text/javascript">
//创建组件1
Vue.component("g-gao",{
template:`<div>
<ul v-if="bol">
<li>篮球</li>
<li>游泳</li>
<li>骑行</li>
</ul>
<div>`,
props:["bol"]
})
//创建组件2
Vue.component("g-ze",{
template:`<div>
<ul v-if="!bol">
<li>985</li>
<li>211</li>
<li>菜鸡大学</li>
</ul>
<div>`,
props:["bol"]
})
var ve = new Vue({
el:"#app",
data:{
bol:true
},
methods:{
show1(){
this.bol = true;
},
show2(){
this.bol = false;
}
}
})
</script>
</html>
