第九课 Vue中的v-bind指令拓展

MarcoPage

于 2024-10-18 12:51:33 发布

阅读量440

点赞数 1

CC 4.0 BY-SA版权

分类专栏： VUE 基础课程文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44010641/article/details/143050042

VUE 基础课程专栏收录该内容

23 篇文章

订阅专栏

Vue中的v-bind指令

示例拓展

1）切换样式

    <style>
        .test{
            width: 100px;
            height: 100px;
            border: 3px solid #000;
        }

        .bg{
            background: red;
        }
    </style>
    <div id="app">
        <input type="button" value="点击切换样式" @click="check"> 
        <div class="test" :class="{bg: status}"></div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                class: 'bg',
                status: true
            },
            methods: {
                check(){
                    this.status = !this.status;
                }
            }
        })
    </script>

切换更改状态

    <div id="app">
        <input type="button" value="点击切换样式" @click="check"> 
        <input type="text" :disabled="status" placeholder="尝试在这里输入内容">
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                status: true
            },
            methods: {
                check(){
                    this.status = !this.status;
                }
            }
        })
    </script>