Vue-3

• 小案例

4.1 选项卡

<div class="box" id="app">

<div class="header">

<!-- cur的显示状态是根据curState的状态进行显示的，如果curState和index相等了当前css属性cur就生效了 -->

 <!-- displayState事件的作用是将当前span的index传出去 -->

        <span :class="{cur: curState == index}" v-for="(item,index) in hTitle" @mouseenter="displayState(index)">{{item}}</span>

    </div>

    <div class="content" v-show="curState == 0">

        <p>首页首页首页首页首页首页首页首页首页</p>

        <p>首页首页首页首页首页首页首页首页首页</p>

        <p>首页首页首页首页首页首页首页首页首页</p>

        <p>首页首页首页首页首页首页首页首页首页</p>

        <p>首页首页首页首页首页首页首页首页首页</p>

        <p>首页首页首页首页首页首页首页首页首页</p>

    </div>

    <div class="content"  v-show="curState == 2">

        <p>娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐</p>

        <p>娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐</p>

        <p>娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐</p>

        <p>娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐</p>

        <p>娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐</p>

        <p>娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐</p>

    </div>

    <div class="content"  v-show="curState == 1">

        <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>

        <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>

        <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>

        <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>

        <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>

        <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>

    </div>

</div>

<script src="js/vue.js"></script>

<script>

    var vue = new Vue({

        el:"#app",

        data:{

            hTitle:['首页','新闻','娱乐'],

            showContent: true,

            // 显示状态，curState和谁相等了，谁显示

            curState: 0

        },

        methods: {

            displayState(index) {

                this.curState = index;

            }

        },

    })

</script>

4.2 调色板

<div id="app" v-clock>

<p class="pickers" :style="{background:'rgb('+r+','+g+','+b+')'}"></p>

    <p>

        r:<input max="255" min="0" type="range" v-model="r"/><input max="255" min="0" v-model="r" type="number">

    </p>

    <p>

        g:<input  max="255" min="0" type="range" v-model="g"/><input max="255" min="0" v-model="g" type="number">

    </p>

    <p>

        b:<input  max="255" min="0" type="range" v-model="b"/><input max="255" min="0" v-model="b" type="number">

    </p>

</div>

<script src = "js/vue.js"></script>

<script>

    var vue = new Vue({

        el: "#app",

        data: {

            r: 100,

            g: 200,

            b: 123

        },

        methods:{

            

        }

    })

</script>

4.3 微博发布框

<div id="app">

    <textarea v-model='content' cols="30" rows="10" placeholder="请发表你今天的心情。。。。"></textarea>

    <!-- warn生效机制：当内容的数量大于100的时候，渲染文字为红色 -->

    <p :class="{warn: content.length > 100}">{{content.length}}/100</p>

    <p>

        <!-- disabled生效机制：当内容的数量大于100的时候，不能点击 -->

        <button :disabled="content.length > 100">发布</button>

        <!-- disabled生效机制：当内容的小于等于0的时候，不能点击 -->

        <button @click="clear" :disabled="content.length <= 0">清空</button>

    </p>

</div>

<script src='js/vue.js'></script>

<script>

    var vue = new Vue({

        el:'#app',

        data:{

            content:""

        },

        methods:{

            // 清空textarea文本输入框的内容

            clear() {

                this.content = ''

            }

        }

    })

</script>