03-Vue数据动态绑定(v-bind)

李先生 2020年12月11日 101次浏览

Vue数据动态绑定

v-bind指令

  • v-bind用于绑定一个或多个属性值,或者向另一个组建传递props值(这个学到组件时再介绍)
  • 在开发中,有哪些属性需要进行绑定呢?
    • 图片的链接src、网站的链接href、动态绑定一些类、样式等等
  • 比如通过Vue实例中的data绑定元素的src和href,代码如下:
<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-bind指令基本使用</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 错误的做法:这里不可以使用mustanche语法 -->
        <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>
        const app = new Vue({
           el:'#app',
           data:{
               imgUrl :"https://cn.vuejs.org/images/logo.png",
               aHref   : "http://www.baidu.com"
           },
           methods:{}
        });
    </script>
</body>

</html>

动态绑定class语法

  • 动态绑定对象语法
<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="../js/vue.js"></script>
    <style>
        .active{
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- <h2 class="active">{{message}}</h2> -->
        <h2 :class="active">{{message}}</h2>
        <!-- <h2 :class="{类名1:true,类名2:boolean}">{{message}}</h2> -->
        <h2 :class="{active:true,line:false}">{{message}}</h2>
        <h2 class = "title" :class="{active:isActive,line:isLine}">{{message}}</h2>
        <h2 :class="getClasses()">{{message}}</h2>
        <button v-on:click="btnClick">按钮</button>
    </div>
    <script>
        const app = new Vue({
           el:'#app',
           data:{
               message:"你好",
               active: 'active',
               isActive: true,
               isLine: true
           },
           methods:{
            btnClick:function(){
                this.isActive = ! this.isActive
            },
            getClasses: function(){
                return {active:this.isActive,line:this.isLine}
            }
           }
        });
    </script>
</body>

</html>
  • 动态绑定之数组写法
<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2 :class="['active','line']">{{message}}</h2>
        <!-- 注意下面这个getClasses()的括号不能漏了 -->
        <h2 :class="getClasses()">{{message}}</h2>
    </div>
    <script>
        const app = new Vue({
           el:'#app',
           data:{
               message:"你好",
               active: "class1",
               line: "class2"
           },
           methods:{
               getClasses: function(){
                   return [this.active,this.line]
               }
           }
        });
    </script>
</body>

</html>

作业:v-for和v-bind的结合使用

需求:点击列表中的哪一项,那么该项的文字变成红色

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="../js/vue.js"></script>
    <style>
        .active{
            color: red;
        }
    </style>
</head>

<body>
    <!-- 点击列表中的哪一项,那么该项的文字变成红色 -->
    <div id="app">
        <ul>
            <li :class="getClasses(index)" v-for="(m,index) in movies" v-on:click="change(index)">{{m}}</li>
        </ul>
    </div>
    <script>
        const app = new Vue({
           el:'#app',
           data:{
               movies:['海王','海尔兄弟','火影忍者','进击的巨人'],
               isClick:0
           },
           methods:{
               getClasses :function(index){
                   if(index==this.isClick){
                        return ['active']
                   }
               },
               change :function(index){
                    this.isClick = index
               }
           }
        });
    </script>
</body>

</html>

动态绑定style

  • 绑定对象语法
<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- <h2 :style="{key(属性名):value(属性值)}">{{message}}</h2> -->
        <h2 :style="{fontSize:'50px'}">{{message}}</h2>
        <h2 :style="{fontSize:finalSize,color:finalColor}">{{message}}</h2>
        <h2 :style="getStyle()">{{message}}</h2>
    </div>
    <script>
        const app = new Vue({
           el:'#app',
           data:{
               message:"你好",
               finalSize:"100px",
               finalColor:'red'
           },
           methods:{
               getStyle:function(){
                   return {fontSize:this.finalSize,backgroundColor:this.finalColor}
               }
           }
        });
    </script>
</body>

</html>
  • 绑定数组语法
<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2 :style="[baseStyle,baseStyle1]">{{message}}</h2>
    </div>
    <script>
        const app = new Vue({
           el:'#app',
           data:{
               message:"你好",
               baseStyle:{backgroundColor:'red'},
               baseStyle1:{fontSize:'100px'}
           },
           methods:{}
        });
    </script>
</body>

</html>