三、动态绑定属性（Class）

一、v-bind 用于绑定一个或者多个属性值，或者向另一个组件传递props值 ( 比如图片的链接src、网站的链接href、动态绑定一些类、样式等等 )

下图是通过 v-bind 绑定a标签的href 和图片的src属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>    
        <script src="../Js/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
            <!--错误的做法：这里不允许使用mustache语法-->
            <!--<img src=" {{ ImageUrl }} " alt="">-->
            <!--正确的做法：使用 v-bind语法 -->
           <img v-bind:src="ImageUrl" alt="">

           <a v-bind:href="aUrl">百度一下</a>
        </div>
        <script>
            const app = new Vue({
                el:"#app",
                data:{
                    message:"你好啊",
                    ImageUrl:"https://img0.baidu.com/it/u=610860566,2770891376&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
                    aUrl:"https://www.baidu.com",
                }
            });
        </script>
    </body>
</html>

二、v-bind语法糖

v-bind对应的语法糖，简写形式，通常在编写代码时使用缩写的方式

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>    
        <script src="../Js/vue.min.js"></script>
        <style>
            .active{
                color: red;
            }
            .line{
                font-style: initial;
                font-weight: bolder;
                font-family:Verdana, Geneva, Tahoma, sans-serif
            }
        </style>
    </head>
    <body>
        <div id="app">
          <!-- <h2 :class="activeC">{{message}}</h2> -->
          <!-- <h2 :class="{key1:value1 , key2:value2}">{{message}}</h2> -->
          <span :class="{ active : IsactiveC  }">{{message}}</span>
          <br/>
          <span :class="getClasses()">{{message}}</span>
          <br/>
          <button v-on:click="isBtnClick">按钮</button>
        </div>
        <script>
            const app = new Vue({
                el:"#app",
                data:{
                    message:"你好啊",
                    IsactiveC:true,
                    IsLine:true
                },
                methods:{
                    isBtnClick:function(){
                        this.IsactiveC=!this.IsactiveC;
                    },
                    getClasses:function(){
                        return { active : this.IsactiveC , line : this.IsLine }
                    }
                }
            });
        </script>
    </body>
</html>

四、02-v-bind动态绑定class(数组语法)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>    
        <script src="../Js/vue.min.js"></script>
        <style>
            .active{
                color: red;
            }
            .line{
               font-style: oblique;
            }
        </style>
    </head>
    <body>
        <div id="app">
          <h2 :class="['active','line']"> {{message}} </h2>
          <h2 :class="getClassSe()"> {{message}} </h2>
        </div>
        <script>
            const app = new Vue({
                el:"#app",
                data:{
                    message:"你好啊",
                    actives:"aaaaaa",
                    lines:"bbbbb",
                },
                methods:{
                    getClassSe:function(){
                        return [ this.actives , this.lines ]
                    }
                }
            });
        </script>
    </body>
</html>

posted @ 2022-03-28 16:16 搬砖工具人阅读(551) 评论(0) 收藏举报

刷新页面返回顶部

搬砖工具人

三、动态绑定属性（Class）

公告