vue 基本指令选项卡、调色板、微博发布框

最新推荐文章于 2024-04-03 06:38:01 发布

敢问

最新推荐文章于 2024-04-03 06:38:01 发布

阅读量328

点赞数 1

分类专栏： VUE 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_41040445/article/details/111396170

版权

VUE 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

一、选项卡

<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>

敢问

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
vue 基本指令选项卡、调色板、微博发布框

一、选项卡<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;
复制链接

扫一扫