一、选项卡
<style>
.box{
width: 600px; margin: 50px auto; border: 1px solid #333;
}
.head{
display: flex;
}
.head p{
width: 25%; text-align: center; line-height: 35px; margin: 0; padding: 0;
background-color: pink;
}
.cur{
color: #fafafa; background-color: #666;
}
</style>
<body>
<div id="app">
<div class="box">
<div class="head">
<p v-for="(items,index) in tabs" @mouseenter="shouContext(index)" :class="{cur:contextIndex == index}">{{items}}</p>
</div>
<div class="context" v-show="contextIndex==0">
<h2>春季气候特点与人体生理特点</h2>
。。。。。。。。。。
</div>
<div class="context" v-show="contextIndex==1">
<h2>夏季气候特点与人体生理特点</h2>
。。。。。。。。。。
</div>
<div class="context" v-show="contextIndex==2">
<h2>秋季气候特点与人体生理特点</h2>
。。。。。。。。。。
</div>
<div class="context" v-show="contextIndex==3">
<h2>冬季气候特点与人体生理特点</h2>
。。。。。。。。。。。
</div>
</div>
</div>
<script src="js/vue.js"></script>
<script>
var vue = new Vue({
el : "#app",
data:{
tabs:["春","夏","秋","冬",],
contextIndex:0
},
methods : {
shouContext(index){
this.contextIndex = index;
console.log(this.contextIndex)
}
}
})
</script>
</body>
</html>
二、调色板
<div id="app">
<div class="box" :style="{'background':'rgb('+r+','+g+','+b+')' } "></div>
<div>
r <input type="range" max="255" min="0" v-model="r">
<input type="text" max="255" min="0" v-model="r">
</div>
<div>
g <input type="range" max="255" min="0"v-model="g"><input type="text" max="255" min="0"v-model="g">
</div>
<div>
b <input type="range" max="255" min="0" v-model="b"><input type="text" max="255" min="0"v-model="b">
</div>
</div>
<script src="js/vue.js"></script>
<script>
var vue = new Vue({
el : "#app",
data : {
r:152,
g:39,
b:45
}
})
</script>
三、微博发布框
<style>
textarea{
width: 400px; height: 200px; border: 1px solid #333; display: block;
}
</style>
<body>
<div id="app">
<textarea name="" id="" cols="30" rows="10" v-model="context"></textarea>
<p>{{context.length}}/100</p>
<div>
<button :disabled="context.length>100">发布</button>
<button @click="clear" :disabled="context.length == 0">清空</button>
</div>
</div>
<script src="js/vue.js"></script>
<script>
var vue = new Vue({
el : "#app",
data:{
context:''
},
methods:{
clear(){
console.log("进来了")
this.context =''
}
}
})
</script>
</body>