Vue学习（三）——v-bind指令

最新推荐文章于 2024-06-06 10:14:42 发布

秃头的毛睿

最新推荐文章于 2024-06-06 10:14:42 发布

阅读量629

点赞数

本文链接：https://blog.csdn.net/weixin_45927758/article/details/108922552

版权

1.动态绑定链接

src="link"或者src="{{link}}"都是不可取的，我们需要通过v-bind属性来动态绑定链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="jdg">
        <img v-bind:src="link" alt="">
    </div>
    <script src="../vue.js"></script>
    <script>
        setTimeout(function(){
            const app=new Vue({
            el:'#jdg',
            data:{
                link:'http://img.crawler.qq.com/lolwebschool/0/JAutoCMS_LOLWeb_dde741b7087a8f625d74842e0a56b392/0'
            }
        })
        },1000)
    </script>
</body>
</html>

v-bind:src="link"是动态绑定链接的方法，或者采用语法糖的语法 :src="link"

2.动态绑定class——对象语法

我们也可以对class使用v-bind，这样我们可以 v-bind:class="{类名1:boolean,类名2:boolean}" 这样调用可以控制元素的样式显示，布尔值为真，则显示该样式，为假就不显示该样式，布尔值可以使用data中的某个变量数据代替方便控制。并且如果有些样式是固定的，我们就可以直接class="样式名"，这两个可以同时存在，会被浏览器叠加显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ylow{
            color: red;
        }
        .line{
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div id="jdg">
        <h1 v-bind:class="{ylow:isYellow,line:haveLine}">我们LGD是不可战胜的！</h1>
        <button v-on:click="beBlack">变黑</button>
    </div>
    <script src="../vue.js"></script>
    <script>
        setTimeout(function(){
            const app=new Vue({
            el:'#jdg',
            data:{
                 isYellow:true,
                 haveLine:true
            },
            methods:{
                beBlack:function(){
                    this.isYellow=false;
                }
            }
        })
        },1000)
    </script>
</body>
</html>

我们还可以使用方法来为元素绑定属性

<h1 v-bind:class="H1Getclasses()">我们LGD是不可战胜的！</h1>

以下是在methods中定义的方法：

H1Getclasses:function(){

return {ylow:this.isYellow,line:this.haveLine};

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ylow{
            color: red;
        }
        .line{
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div id="jdg">
        <h1 v-bind:class="H1Getclasses()">我们LGD是不可战胜的！</h1>
        <button v-on:click="beBlack">变黑</button>
    </div>
    <script src="../vue.js"></script>
    <script>
        setTimeout(function(){
            const app=new Vue({
            el:'#jdg',
            data:{
                 isYellow:true,
                 haveLine:true
            },
            methods:{
                beBlack:function(){
                    this.isYellow=false;
                },
                H1Getclasses:function(){
                    return {ylow:this.isYellow,line:this.haveLine};
                }
            }
        })
        },1000)
    </script>
</body>
</html>

这样效果是一样的。

3.动态绑定class——数组语法

v-bind:class="[xxx,'xxx',xxx]"，像这样的语法是数组语法，我们在数组中写入需要添加的样式，如果加了引号的话就是表示是一个固定的写在CSS文件中的某一个样式类，表示一个字符串，没有加引号的话就表示一个变量，真正添加上去的样式是这个变量中存储的字符串。

注意，数组语法其实也可以使用方法调用，向上面对象语法那样使用即可，但是需要返回的是数组。
4.动态绑定style——对象语法

v-bind:style="{属性名:属性值}"，属性值如果是一个常量，那么需要加上引号，如果是一个变量，那么不用加引号，并且该属性的值就是变量中存储的字符串。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>

<body>
    <div id="jdg">
        <!--
        <ul>
            <li v-for="it in S10" v-on:click="">{{it}}</li>
        </ul>
        -->
        <p :style="{fontSize:'50px',color:fcolor}">我知道你和我就像是豆浆油条</p>
    </div>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: '#jdg',
            data: {
                S10: ['JDG', 'TES', 'SN', 'LGD'],
                beRed:[false,false,false,false],
                fcolor:'red'
            },
            methods: {
            }
        })
    </script>
</body>

</html>

这种用法仍然可以使用方法函数来返回调用，用法和上面的class用法相似。

5.动态绑定style——数组语法

v-bind:style="[xxx,xxx]"xxx是变量名，里面存放的是样式的对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>

<body>
    <div id="jdg">
        <!--
        <ul>
            <li v-for="it in S10" v-on:click="">{{it}}</li>
        </ul>
        -->
        <p :style="[fcolor,Fcolor]">我知道你和我就像是豆浆油条</p>
    </div>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: '#jdg',
            data: {
                S10: ['JDG', 'TES', 'SN', 'LGD'],
                beRed:[false,false,false,false],
                fcolor:{fontSize:'50px',backgroundColor:'yellow'},
                Fcolor:{color:'red'}
            },
            methods: {
            }
        })
    </script>
</body>

</html>

秃头的毛睿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习（三）——v-bind指令

1.动态绑定链接src="link"或者src="{{link}}"都是不可取的，我们需要通过v-bind属性来动态绑定链接<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
复制链接

扫一扫