Vue-学习笔记-03 v-bind绑定class与style

一、v-bind 动态绑定属性二、v-bind 绑定class2.1 绑定字符串2.2 对象语法2.3 绑定数组三、动态绑定style3.1 对象方式3.2 数组方式

优雅哥cc

8262人浏览 · 2020-07-24 17:22:22

优雅哥cc · 2020-07-24 17:22:22 发布

文章目录

一、v-bind 动态绑定属性
二、v-bind 绑定class
三、动态绑定style
- 3.1 对象方式
- 3.2 数组方式
四、练习 v-bind和v-for 结合

一、v-bind 动态绑定属性

语法糖 :
v-bind:src等于:src

基本使用方法示例：动态绑定url：

<body>
    <div id='app'>
        <img src="https://cn.vuejs.org/images/logo.png" alt="">

        <img v-bind:src='url' alt="">

        <a :href='aHref'>百度</a>
    </div>
    
    <script src='../js/vue.js'></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                url:'https://cn.vuejs.org/images/logo.png',
                aHref:'https://www.baidu.com'
            }
        })
    </script>
</body>

效果：
在这里插入图片描述

二、v-bind 绑定class

2.1 绑定字符串

<style>
    .active{
        background-color: red;
    }
    .color{
        color: teal;
    }
    .fontSize{
        font-size: 48px;
    }
</style>
<body>
    <div id='app'>
        <!-- 直接字符串方式 -->
        <h2 :class='active'>active</h2>
        <!-- 字符串数组方式 -->
        <h2 :class='activeArr'>activeArr</h2>
        <!-- 字符串对象方式 -->
        <h2 :class='activeObj'>activeObj</h2>
    </div>
    
    <script src='../js/vue.js'></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                active:"active",
                activeArr:['color','fontSize'],
                activeObj:{
                    color:"true",
                    active:"true"
                }
            },
        })
    </script>
</body>

效果：
在这里插入图片描述

2.2 对象语法

提示：普通的class 与vue 所绑定的class不会冲突，会合并
也就是标签上手动写的class不会与vue冲突。

语法格式：
<h2 :class='{类名1:boolean,类名2:boolean}'></h2>

<style>
    .color{
        color: red;
    }
    .fontSize{
        font-size: 48px;
    }
</style>
<body>
    <div id='app'>
        <!-- <h2 :class='{类名1:boolean,类二2:boolean}'></h2> -->

        <h2 :class="{color:isColor,fontSize:isFontSize}">{{message}}</h2>
        <!-- 通过方法返回 -->
        <h2 :class="getClass()">{{message}}</h2>
        
        <!-- 此处点击该按钮可以切换文字的颜色 -->
        <button @click='btnClick'>按钮</button>
    </div>
    
    <script src='../js/vue.js'></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                message:'这是测试文本',
                isColor:"true",
                isFontSize:"true"
            },
            methods: {
                btnClick:function(){
                    this.isColor = !this.isColor;
                },
                getClass:function(){
                    return {color:this.isColor,fontSize:this.isFontSize};
                }
            },
        })
    </script>
</body>

效果：
在这里插入图片描述

2.3 绑定数组

<style>
    .color{
        color: red;
    }
    .fontSize{
        font-size: 48px;
    }
</style>
<body>
    <div id='app'>
        <!-- 加单引号解析成字符串 -->
        <h2 :class="['color','fontSize']">{{message}}</h2>
        <!-- 不加单引号解析成变量 -->
        <h2 :class="[colorcolor,font]">{{message}}</h2>
        <!-- 通过方法返回 -->
        <h2 :class="getClass()">{{message}}</h2>
        <!-- 数组套对象 -->
        <h2 v-bind:class="['color',{fontSize:true}]">测试样式4</h2>
    </div>
    
    <script src='../js/vue.js'></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                message:'test',
                colorcolor:"color",
                font:"fontSize"
            },
            methods: {
                getClass:function(){
                    return [this.colorcolor,this.font];
                }
            },
        })
    </script>
</body>

效果：

在这里插入图片描述

三、动态绑定style

通过动态绑定style，可以通过参数动态的改变元素的样式。

3.1 对象方式

对象方式的语法：
<h2 :style="{css属性名:值}">{{message}}</h2>

<body>
    <div id='app'>
        <!-- <h2 :style="{css属性名:值}">{{message}}</h2> -->
        
        <!-- 一、 语法一 此方式key需要单引号  值都需要单引号-->
        <h2 :style="{'font-size':'50px'}">{{message}}</h2>
        <!-- 一、 语法二 此方式key不需要单引号 -->
        <h2 :style="{fontSize:'50px'}">{{message}}</h2>


        <input type="text" v-model='isFontSize'>
        <input type="range" v-model='isFontSize'>
        <!-- 二、 使用变量 -->
        <h2 :style="{color:color,fontSize:isFontSize+'px'}">{{message}}</h2>
        <!-- 使用方法返回 -->
        <h2 :style="getStyles()">{{message}}</h2>

        <!-- 三、 字符串形式的对象 -->
        <h2 :style="isStyles">测试文本</h2>
    </div>
    
    <script src='../js/vue.js'></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                message:'test',
                isStyles:{color:'red',fontSize:'48px'},
                color:'red',
                isFontSize:24
            },
            methods: {
                getStyles:function(){
                    return {color:this.color,fontSize:this.isFontSize+'px'}
                }
            },
        })
    </script>
</body>

效果：
在这里插入图片描述

3.2 数组方式

<body>
    <div id='app'>
        <h2 :style="[fontSize,bgc]">测试文本</h2>
    </div>
    
    <script src='../js/vue.js'></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                fontSize:{fontSize:'48px'},
                bgc:{backgroundColor:"red"}
            },
        })
    </script>
</body>

效果：
在这里插入图片描述

四、练习 v-bind和v-for 结合

实现点击谁，谁的颜色就变为红色，默认第一个为红色

<style>
    .active {
        color: red;
    }
</style>
<body>
    <div id='app'>
        <ul>
            <li @click="setClass(index)" :class="{active:currentIndex == index}" v-for="(item, index) in movies">
                {{item}}
            </li>
        </ul>
    </div>

    <script src='../js/vue.js'></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                movies: ['海王', '海尔兄弟', '火隐忍者', '进击的巨人'],
                // 默认高亮的是
                currentIndex: 0,
            },
            methods: {
                setClass: function (index) {
                    this.currentIndex = index;
                },
            },
        })
    </script>
</body>

效果：
在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^