v-bind之动态绑定

作者: 瑟闻风倾 | 来源:发表于2020-07-07 13:44 被阅读0次

vue03
vue中的指令
6 动态绑定属性
v-bind的基本用法
2020-01-23
vue v-model v-bind
v-bind之动态绑定
绑定样式（动态切换样式）
第四章 v-bind 及 class 与 style 绑定
绑定属性

1. v-bind 绑定基本属性

动态绑定img的src属性
动态绑定a的href属性
等等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <script type="text/javascript" src="../first/vue1026.js"></script>
</head>
<body>
    <div id="app">
        <img v-bind:src="imgUrl" alt="">
        <img :src="imgUrl" alt="">
        <a v-bind:href="aHref">百度一下</a>
        <a :href="aHref">百度一下</a>
    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            imgUrl:"http://img.taopic.com/uploads/allimg/110720/6444-110H01Z61061.jpg",
            aHref:"http://www.baidu.com"
        }
    });
</script>
</html>

语法糖写法（简写）：v-bind:src简写为:src；v-bind:href简写为:href。

2. 动态绑定class

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

格式：v-bind:class="{ 样式类名1: 布尔值1, 样式类名2: 布尔值2，... }"
说明：布尔值为真时，对应的样式起效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <style type="text/css">
        .title{
            background-color: yellow;
        }
        .active{
            color: red;
        }
        .border{
            border:5px solid seagreen;
        }
    </style>
    <script type="text/javascript" src="../first/vue1026.js"></script>
</head>
<body>
    <div id="app">
        <h2 class="title" :class="{active:isActive,border:isBorder}">{{message}}</h2>
        <h2 class="title" :class="getClasses()">{{message}}</h2>
        <button @click="btnClick()">改变样式</button>
    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            message:"打赢蓝天保卫战",
            isActive:false,
            isBorder:true
        },
        methods:{
            btnClick:function(){
                this.isActive = !this.isActive
                this.isBorder = !this.isBorder
            },
            getClasses:function(){
                return {active:this.isActive,border:this.isBorder}
            }
        }
    });
</script>
</html>

语法糖（简写）：v-bind:class简写为:class；v-on:click简写为@click。
计算属性（computed）：也可以在这里绑定一个返回对象的计算属性``
方法省括号：

(2) v-bind 动态绑定class(数组语法:用的很少)

<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染为

<div class="active text-danger"></div>

3. 动态绑定style

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

格式：v-bind:style="{ CSS 属性名1: 属性值1, CSS 属性名2: 属性值2,... }"
说明：CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名。
应用：常用于组件化开发（组件样式为可动态改变）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <script type="text/javascript" src="../first/vue1026.js"></script>
</head>
<body>
    <div id="app">
        <h2 :style="{fontSize:finalSize+'px',backgroundColor:finalColor}">{{message}}</h2>
        <h2 :style="getStyles()">{{message}}</h2>
        <button @click="btnClick()">改变样式</button>
    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            message:"打赢蓝天保卫战",
            finalSize:100,
            finalColor:'red'
        },
        methods:{
            btnClick:function(){
                this.finalSize = 50
                this.finalColor = 'green'
            },
            getStyles:function(){
                return {fontSize:this.finalSize+'px',backgroundColor:this.finalColor}
            }
        }
    });
</script>
</html>

拓展：直接绑定到一个样式对象

<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    fontSize: '100px',
    backgroundColor: 'red'
  }
}

(2) v-bind 动态绑定style(数组语法:用的很少)

<div v-bind:style="[baseStyles, overridingStyles]"></div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <script type="text/javascript" src="../first/vue1026.js"></script>
</head>
<body>
    <div id="app">
        <h2 :style="[styles1, styles2]">{{message}}</h2>
    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            message:"打赢蓝天保卫战",
            styles1:{fontSize:'100px'},
            styles2:{backgroundColor:'red',color:'white'}
        }
    });
</script>
</html>