vue学习记录-03 动态绑定属性

vue学习记录-03 动态绑定属性

这篇文章是根据codewhy老师在b站的视频进行的学习记录

---

---

一、v-bind的基本使用

如果我们想要动态的绑定一个属性，使用mustache语法肯定是无能为力的，这个时候就需要借助v-bind来对值进行动态绑定。
当然，v-bind这么长而且又常用，所以与v-on一样，VUE也支持将其直接缩写为“：”的形式。

<div id='app'>
        <!-- 错误做法，此处不能用mustache语法 -->
        <!-- <img src="{{imgURL}}" alt=""> -->
        <img v-bind:src="imgURL" alt="">
        <!-- 缩写为“：” -->
        <a :href="aHref">百度一下</a>
    </div>

const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello,Vue!',
                imgURL:'https://cn.vuejs.org/images/logo.png',
                aHref:'http://www.baidu.com'
            },
        })

二、v-bind动态绑定class

对class使用v-bind进行绑定是很常见的一种用法。

		<h2 class="active">{{message}}</h2>
        <h2 :class="active">{{message}}</h2>

如果有多个class需要绑定，我们可以用对象的写法，也可以用数组的写法。

对象的写法：

		<h2 :class="{active:isActive,line:isLine}">{{message}}</h2>
        <!-- 不会删除的class直接写出来，可能会删除的class用v-bind的方式写出来 -->
        <h2 class="title" :class="{active:isActive,line:isLine}">{{message}}</h2>
        <h2 class="title" :class="getClasses()">{{message}}</h2>
        <button @click="btnClick">点击变色</button>

const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello,Vue!',
                active:'active',
                isActive:true,
                isLine:false
            },
            methods:{
                btnClick:function(){
                    this.isActive=!this.isActive
                },
                getClasses:function(){
                    return {active:this.isActive,line:this.isLine}
                }
            }
        })

	<style>
        .active{
            color: red;
        }
    </style>

class的赋值为布尔值时，就可以使用方法控制删除或者添加class

数组的写法：

		<h2 class="title" :class="['active','line']">{{message}}</h2>
        <!-- 去掉引号后从字符串变成变量 -->
        <h2 class="title" :class="[active,line]">{{message}}</h2>
        <!-- 优化写法 -->
        <h2 class="title" :class="getClasses()">{{message}}</h2>

const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello,Vue!',
                active:'aaa',
                line:'bbb'
            },
            methods:{
                getClasses:function(){
                    return [this.active,this.line]
                }
            }
        })

如果数组中是字符串，那么就不会绑定到对应的值

浏览器中第一行h2中的active和line并没有变成data中对应的数据

三、一个v-bind的小案例

现在我们来写一个小案例来回顾一下。
案例要求：第一列文字为红色，之后点击哪段文字那么哪段文字就会变红。

<div id='app'>
        <ul>
            <!-- 三目写法 -->
            <!-- <li v-for="(m,index) in movies" @click="changeColor(index)" :class="index==cuerys?'red':''" :title="m">
                {{index}}-{{m}}</li> -->
            <!-- 对象写法 -->
            <li v-for="(m,index) in movies" @click="changeColor(index)" :class="{'red':cuerys==index}" :title="m">
                {{index}}-{{m}}</li>    
        </ul>
    </div>

const app = new Vue({
            el: '#app',
            data: {
                movies: ['海王', '海尔兄弟', '火影忍者', '进击的巨人'],
                cuerys: 0
            },
            methods: {
                changeColor: function (index) {
                    this.cuerys = index;
                },
            }
        })

	<style>
        .red {
            color: red;
        }
    </style>

页面效果：

四、v-bind动态绑定style

另外对于style也是会经常使用class进行绑定的，同样的，也是可以使用对象或者数组去进行实现。
对象的写法：

<div id='app'>
        <!-- <h2 :style="{key(属性名):value(属性值)}">{{message}}</h2> -->
        <h2 :style="{'font-size':'50px'}">{{message}}</h2>
        <!-- 驼峰写法,50px必须加上单引号否则当作变量解析 -->
        <h2 :style="{fontSize:'50px'}">{{message}}</h2>
        <!-- finalSize被当作变量解析 -->
        <h2 :style="{fontSize:finalSize}">{{message}}</h2>
        <!-- 也可以写表达式 -->
        <h2 :style="{fontSize:finalSizeNum+'px'}">{{message}}</h2>
        <h2 :style="{fontSize:finalSizeNum+'px',color:finalColor,backgroundColor:finalBackColor}">{{message}}</h2>
        <!-- 优化 -->
        <h2 :style="styleFun()">{{message}}</h2>
    </div>

const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello,Vue!',
                finalSize: '100px',
                finalSizeNum: 100,
                finalColor: 'red',
                finalBackColor:'Black'
            },
            methods:{
                styleFun:function(){
                    return {fontSize:this.finalSizeNum+'px',color:this.finalColor,backgroundColor:this.finalBackColor}
                }
            }
        })

数组的写法：

<div id='app'>
        <h2 :style="[baseStyle,baseStyle1]">{{message}}</h2>
    </div>

const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello,Vue!',
                baseStyle:{backgroundColor:'red'},
                baseStyle1:{fontSize:'100px'}
            },
        })