v-bind之动态绑定

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;
        }
        .bg-bule{
            background-color: #06a7e2;
        }
    </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="{active:isActive,'bg-bule':isBackground}">{{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,
            isBackground: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）：也可以在这里绑定一个返回对象的计算属性``
方法省括号：
注意：当样式类名用 - 连接时(如：bg-bule)，要用单引号引起来。

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

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

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

渲染为

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

(3) 示例

<template>
    <view class="cu-item uni-flex justify-center align-center" v-for="(item,index) in boardList" :key="index">
        <view class="shape-board">
            <!-- <view :class="['cuIcon-' + item.cuIcon]" class="text-white"></view> -->
            <view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]"></view>
            <text style="color: #FFFFFF;font-size: 20upx;">{{item.name}}</text>
        </view>     
    </view>
</template>

<script>
var _self;
export default {
    data() {
        return {
            boardList: [{
                cuIcon: 'formfill',
                color: 'red',
                bid: "1",
                name: '汇总看板'
            }, {
                cuIcon: 'punch',
                color: 'yellow',
                bid: "2",
                name: '机器看板'
            }, {
                cuIcon: 'vipcard',
                color: 'olive',
                bid: "3",
                name: '生产看板一'
            }, {
                cuIcon: 'news',
                color: 'olive',
                bid: "4",
                name: '生产看板二'
            }]
        }
    },
    onLoad:function(){

    },
    methods: {
        
        },
    }
}
</script>

<style>
    
</style>

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>
        <button @click="btnClick()">改变样式</button>

        <h2 :style="getStyles()">{{message}}</h2>
        <h2 :style="{'margin-top':contentTop+'px'}">{{message}}</h2>
    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            message:"打赢蓝天保卫战",
            finalSize:100,
            finalColor:'red',
            ct_id:'',
        },
        contentTop:function(){
            var finalTop = 0;
            if(this.ct_id == ''){
                finalTop = 112;
            }else{
                finalTop = 162;
            }
            // #endif
            return finalTop;
        },
        methods:{
            btnClick:function(){
                this.finalSize = 50
                this.finalColor = 'green'
            },
            //微信小程序不支持，已由计算属性contentTop代替
            getStyles:function(){
                return {
                    fontSize:this.finalSize+'px',
                    backgroundColor:this.finalColor,

                    // 'margin-top':(this.ct_id == '') ? 110px : 160px //报错
                    'margin-top':(this.ct_id == '') ? 110 + 'px' : 160 + 'px'
                }
            }
        }
    });
</script>
</html>

小程序不支持 :style="getTabbarStyles()"的语法，可改为:style="{bottom:tabbarBottom+'px'}"

<!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">
        <view class="tabbar-top" :style="getTabbarStyles()"></view>
        <view class="tabbar-top" :style="{bottom:tabbarBottom+'px'}"></view>
    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{

        },
        computed:{
            tabbarBottom:function(){
                var finalBottom = 0;
                // #ifdef H5
                finalBottom = 49;
                // #endif
                // #ifndef H5
                finalBottom = -1;
                // #endif
                return finalBottom;
            }
        },
        methods:{
            getTabbarStyles:function(){
                var finalBottom = 0;
                // #ifdef H5
                finalBottom = 49;
                // #endif
                // #ifndef H5
                finalBottom = -1;
                // #endif
                return {
                    bottom:finalBottom+'px'
                }
            }
        }
    });
</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>

4. 实战之实现点击列表item效果切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <script type="text/javascript" src="../first/vue1026.js"></script>
    <style>
        .active{
           background-color: aquamarine; 
        }
    </style>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(index,item) in books" :key="item" :class="{active: currentIndex===index}" @click="bookClick(index)">{{item}}</li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            books:['红楼梦','西游记','水浒传','三国演义'],
            currentIndex:0,//记录点击状态
            isClick:true
        },
        methods:{
            bookClick(index){
                this.currentIndex = index
            }
        }
    });
</script>
</html>

v-bind之动态绑定

1. v-bind 绑定基本属性

2. 动态绑定class

3. 动态绑定style

4. 实战 之 实现点击列表item效果切换

4. 实战之实现点击列表item效果切换