1.2. v-bind绑定

最新推荐文章于 2024-03-26 14:06:02 发布

飞翔荷兰号

最新推荐文章于 2024-03-26 14:06:02 发布

阅读量173

点赞数

文章标签： vue.js html css

本文链接：https://blog.csdn.net/weixin_43374578/article/details/108456641

版权

一、动态绑定变量

# 1. 图片地址显示
1. 直接将连接地址写到src中,会将其当做字符串解析
2. 前面加v-bind：会将其当做变量解析，再去对应的Vue模块加载

# 2. 网页的显示： 类似

# 3. 一般v-bind适用于 动态获取的图片及网址

： v-bind的语法糖

<body>
<div id="first">
    <img src="imageUrl" alt="404 picture">
    <img src="https://www.baidu.com/img/hqydong_4f3f63f09807e2a2535ee5c2b6100511.gif" alt="404 picture">
    <img v-bind:src="imageUrl" alt="404 picture"><br>

    <a href="websiteURL"> 百度一下</a>
    <a href="https://www.baidu.com/">百度一下</a>
    <a :href="websiteURL">百度一下</a>
</div>

<script>
    let one = new Vue({
        el: "#first", data: {
            name: "shuzhan",
            imageUrl: "https://www.baidu.com/img/hqydong_4f3f63f09807e2a2535ee5c2b6100511.gif",
            websiteURL: 'https://www.baidu.com/',
        }
    });
</script>
</body>

二. 动态绑定class属性

2.1. 基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind绑定class</title>

    <!--1. 在head中定义多个样式-->
    <style>
        .first {
            color: red;
        }

        .second {
            background: black;
        }

        .third {
            height: 200px;
        }
    </style>
</head>
<body>

<!--2. 在标签中去应用： 去从head标签中去拿-->
<div id="module">

    <!--2.1 class属性直接解析，再从对应的head中去拿
          可以拿多个style-->
    <h2 class="first second third">{{message}}</h2>

    <!--2.2. v-bind: 将对应的class当做变量解析，从Vue中去拿结果
              一次只能拿一个结果-->
    <h2 v-bind:class="firstStyle">{{message}}</h2>

    <!--2.3  class属性和v-bind属性可以共同起作用:
             class和 v-bind:class都只能出现一次-->
    <h2 class="second third" v-bind:class="firstStyle">{{message}}</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#module',
        data: ({
            message: '舒展',
            firstStyle: 'first',
            secondStyle: 'second',
            thirdStyle: 'third',
        })
    })
</script>
</body>
</html>

2.2. 对象语法

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .first {
            color: red;
        }

        .second {
            background: black;
        }

        .third {
            height: 200px;
        }
    </style>
</head>
<body>

<div id="module">

    <!--1.对象语法 {key1:boolean, key2:boolean, key3:boolean}-->

    <!--1.1  key是去head的style中去找，boolean是写死的-->
    <h2 v-bind:class="{first:true,second:true,third:true}">{{message}}</h2>

    <!--1.2  key是去head中的style中去找,boolean是去vue中去找-->
    <h2 v-bind:class="{first:isFirstStyle,second:isSecondStyle,third:isThirdStyle}">{{message}}</h2>

    <!--1.3  使用button切换对应的class属性-->
    <button v-on:click="changeColor()">切换颜色按钮</button>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#module',
        data: ({
            message: '舒展',
            isFirstStyle: true,
            isSecondStyle: true,
            isThirdStyle: true,
        }),
        methods: {
            changeColor: function () {
                this.isFirstStyle = !this.isFirstStyle;
            }
        }
    })
</script>
</body>
</html>

三、动态绑定style属性

3.1. 对象语法

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="module">
    <!-- 1.1 原始使用-->
    <h2 style="color: red; background: blue; font-size: 100px">{{message}}</h2>

    <!-- 1.2 v-bind绑定
                      {key:value, key:value}: 其中key不用解析，value带''是当做常量解析-->
    <h2 v-bind:style="{color:'red',background:'black',fontSize:'100px'}">{{message}}</h2>

    <!-- 1.3 v-bind绑定
                  {key:value, key:value}: 其中key不用解析，value不带''是当做变量解析-->
    <h2 v-bind:style="{color:finalColor,background:finalBgcolor,fontSize:finalSize}">{{message}}</h2>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#module',
        data: ({
            message: '舒展',
            finalColor: 'red',
            finalBgcolor: 'black',
            finalSize: '100px'
        })
    })
</script>
</body>
</html>