Vue-选项卡
vue写的选项卡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<!-- view -->
<div id="app">
豆豆
<p>价格: {{price}}元</p>
<p>
数量
<button>-</button>
<input type="text" value="1">
<button >+</button>
</p>
<p>
<button >购买</button>
<button >添加到购物车</button>
</p>
<div>
<div>
<button @click="dealClick(1)">
详情
</button>
<button @click="dealClick(2)">
参数
</button>
<button @click="dealClick(3)">
评论
</button>
</div>
<div>
<div v-if="index==1">
向香香向香香向香香向香香向香香
</div>
<div v-if="index==2">
size: 18cm
widht: 18cm
height: 18cm
</div>
<div v-if="index==3">
不错,用的挺好
很减压
天天打
最近都大坏了
</div>
</div>
</div>
</div>
<script src="js/vue/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//model
var data = {
msg:"hello world",
num:1,
price:200,
index:1
}
//viewModel
var app = new Vue({
el:"#app",
data:data,
methods:{
dealClick(index){
this.index = index
}
}
})
</script>
</body>
</html>