5. v-bind动态绑定

香菜大魔王(✪ω✪)

已于 2022-01-24 14:07:07 修改

阅读量332

点赞数

分类专栏： VUE2.0 文章标签： vue.js 前端框架

于 2022-01-20 18:21:23 首次发布

本文链接：https://blog.csdn.net/weixin_44020255/article/details/122607228

版权

VUE2.0 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1. v-bind动态绑定属性

2. v-bind动态绑定class(对象语法)

3. v-bind动态绑定class(数组语法)

4. v-bind动态绑定style(对象语法)

5. v-bind动态绑定style(数组语法)

6. v-for和v-bind结合使用

1. v-bind动态绑定属性

<body>
    <div id="app">
        <!-- 错误的做法: 这里不可以使用mustache语法
            只能在标签内容这里才可以使用mustache语法
        <img src="{{imgURL}}" alt=""> -->

        <!-- 正确做法 使用v-bind指令-->
        <img v-bind:src="imgURL" alt="">

        <a v-bind:href="aHref">来 百度一下</a>

        <!--语法糖的写法 只写一个冒号：-->
        <img :src="imgURL" alt="">
        <a :href="aHref">百度一下</a>

    </div>
    <script src="js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '来了来了',
                imgURL: 'https://img.zcool.cn/community/01fa8f5aefb92da801206abab0777f.jpg@2o.jpg',
                aHref: 'http://www.baidu.com'
            }
        })
    </script>
</body>

2. v-bind动态绑定class(对象语法)

<body>
    <div id="app">
        <!--<h2 v-bind:class="{key1: value1,key2: value2}">({message}}</h2>-->
        <!--<h2 v-bind:class="{类名1: true,类名2: boolean}">{{message}}</h2>-->
        <!-- 写法一： -->
        <h2 class="title" v-bind:class="{action: isActive, line: isLine}">{{message}}</h2>s
        <!-- 写法二： -->
        <!-- <h2 class="action" v-bind:class="getClasses()">{{message}}</h2> -->
        <button v-on:click="btnClick">点击我文字换色</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '来了来了',
                isActive: 'true',
                isLine: 'true'
                    //控制台：app.isActive = false
            },
            methods: {
                btnClick: function() {
                    this.isActive = !this.isActive
                },
                /* getClasses: function() {
                    return {
                        action: this.isActive,
                        line: this.isLine
                    }
                } */
            }
        })
    </script>
</body>

3. v-bind动态绑定class(数组语法)

<body>
    <div id="app">
        <h2 class="title" :class="['action','line']">{{message}}</h2>
        <!-- 加了引号  表示字符串 -->
        <h2 class="title" :class="[action, line]">{{message}}</h2>
        <!-- 不加引号  做变量 -->
        <h2 class="title" :class="getClasses()">{{message}}</h2>
    </div>
    <script src="js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '来了来了',
                action: 'aaaaaaaa',
                line: 'bbbbbb'
            },
            methods: {
                getClasses: function() {
                    return [this.action, this.line]
                }
            }
        })
    </script>
</body>

4. v-bind动态绑定style(对象语法)

<body>
    <div id="app">
        <!--<h2 :style="{key(属性名): value(属性值)}">{{message}}</h2>-->

        <!-- 下面的属性名可以写成  (1)font-size  也可  (2)驼峰命名 -->

        <!--'50px'必须加上单引号，否则是当做一个变量去解析-->
        <!--<h2 :style="{fontSize: '50px'}">{{message}}</h2>-->
        <!--finalSize当成一个变量使用-->
        <!--(1) <h2 :style="{fontSize: finalSize}">{{message}}</h2> -->

        <!--(2) -->
        <!-- <h2 :style="{fontSize: finalSize+'px', backgroundColor: finalColor}">{{message}}</h2> -->

        <!-- 或者写成方法 -->
        <h2 :style="getStyles()">{{message}}</h2>
    </div>
    <script src="js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '来了来了',
                //(1) finalSize: '100px'  加单位 下面不加单位
                //(2)
                finalSize: 100,
                finalColor: 'green',
            },
            methods: {
                getStyles: function() {
                    return {
                        fontSize: this.finalSize + 'px',
                        backgroundColor: this.finalColor
                    }
                }
            }
        })
    </script>
</body>

5. v-bind动态绑定style(数组语法)

<body>
    <div id="app">
        <h2 :style="[baseStyle, baseStyle2]">{{message}}</h2>
    </div>
    <script src="js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '来了来了',
                baseStyle: {
                    backgroundColor: 'pink'
                },
                baseStyle2: {
                    fontSize: '100px'
                },
            },

        })
    </script>
</body>

6. v-for和v-bind结合使用

<body>
    <!-- 需求:点 击列表中的哪一项，那么该项的文字变成绿色-->
    <div id="app">
        <ul>
            <li v-for="m in movies">{{m}}</li>
            <li v-for="(m, index) in movies">{{index}}--{{m}}</li>
        </ul>
    </div>
    <script src="js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                movies: ['顾一', '影子', '哈哈哈', '帅小伙']
            }
        })
    </script>
</body>