v-bind: 给标签的属性赋值

名字是乱打的

发布于 2021-12-22 15:34:13

5.9K0

ps:全demo级别自学vue.js,前端大佬自行忽略

首先我们传统方式,如用插值表达式{{}}是无法给我们我属性赋值的如下

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>v-model</title>
        <script src="js/vuejs-2.5.16.js"></script>
    </head>

    <body>
        <div id="app">
            <font color="{{color1}}">颜色1</font>
            <hr>
            <font color="{{color2}}">颜色2</font>
        </div>
    </body>
    <script>
        //view model
        new Vue({
            el:"#app",
            data:{
                color1:"red ",
                color2:"yellow"
            }
        })
    </script>

</html>

所以我们要想在js中动态给标签里的属性赋值,我们需要用到v-bind:

我们可以在属性前面加v-bind: 代表后面的属性值是从我们的vue对象中取得 demo如下:

<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">

    <head>
        <meta charset="utf-8" />
        <title>v-model</title>
        <script src="js/vuejs-2.5.16.js"></script>
    </head>

    <body>
        <div id="app">
            <font v-bind:color="color1">颜色1</font>
            <hr>
            <font v-bind:color="color2">颜色2</font>
        </div>
        <hr />
        <div id="app2"><!-- 检测v-bing的简便用法,直接用:代替V-bind: -->
            <font :color="color3">颜色3</font>
            <hr>
            <font :color="color4">颜色4</font>
        </div>
    </body>
    <script>
        //view model
        new Vue({
            el:"#app",
            data:{
                color1:"red",
                color2:"blue"
            } 
        }) 
        new Vue({
            el:"#app2",
            data:{
                color3:"yellow",
                color4:"red"
            } 
        }) 
    </script>

</html>

效果

另外V-bind支持对属性支持多次赋值以及三目运算符以及.

对象赋值
数组赋值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <div 
    class="test"
    v-bind:class="[ isActive ? 'active' : '', isGreen ? 'green' : '']" 
    style="width:200px; height:200px; text-align:center; line-height:200px;">
        hi vue
    </div>
    
    <div 
    :style="{color:color, fontSize:size, background: isRed ? '#FF0000' : ''}">
        hi vue
    </div>
</div>
<script type="text/javascript">
var vm = new Vue({
    el : "#app",
    data : {
        isActive : true,
        isGreen : true,
        color : "#FFFFFF",
        size : '50px',
        isRed : true
    }
});
</script>
<style>
.test{font-size:30px;}
.green{color:#00FF00;}
.active{background:#FF0000;}
</style>
</body>
</html>

结果如图