03、Vue-绑定属性

01- v-bind基础使用

v-bind用于绑定一个或多个属性值,或者向另外一个组件传递props值。Vue实例中的data绑定元素的src和href;例如:

<div id="app">
    <img v-bind:src="imgurl" alt="">
    <a v-bind:href="url">访问一下博客</a>
    <a :href="bdurl">百度一下</a>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:'hello',
            imgurl:'https://www.getzw.com/upload/2019/12/%E4%BA%8C%E8%BF%9B%E5%88%B6%E4%B8%8E%E5%8D%81%E8%BF%9B%E5%88%B6%E7%9A%84%E7%9B%B8%E4%BA%92%E8%BD%AC%E6%8D%A2-2216696bcba841a1aa37437940ad949e.png',
            url:'https://www.getzw.com',
            bdurl:'https://www.baidu.com'
        }
    })
</script>

如上例,v-bind还有一种简写方式,百度的超链接使用就是直接在属性前加一个英文状态下的冒号。

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

下例为动态绑定的对象语法的使用方式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active{
            color: blue;
        }
    </style>
</head>
<body>
<div id="app">
    <h2 :class="active">{{message}}</h2>
    <h2 :class="{active:isActive,line:isLine}">{{message}}</h2>
    <h2 :class="getClass()">{{message}}</h2>
    <button v-on:click="change()">更改颜色</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:'hello',
            active:'active',
            isActive:'true',
            isLine:'true'
        },
        methods:{
            change:function () {
                this.isActive=!this.isActive
            },
            getClass:function () {
                return {active:this.isActive,line:this.isLine}
            }
        }
    })
</script>
</body>
</html>

03-v-bind动态绑定class(数组语法)

下例为动态绑定的数组语法的使用方式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2 :class="['active','line']">{{message}}</h2>
    <h2 :class="getClass()">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:'hello',
            active:'class1',
            line:'class2'
        },
        methods:{
            getClass:function () {
                return [this.active,this.line]
            }
        }
    })
</script>
</body>
</html>

04- v-bind动态绑定style(对象语法)

下例为动态绑定的对象语法的使用方式:

<script src="../js/vue.js"></script>
<div id="app">
    <!--<h2 :style="{key(属性名):value(属性值)}">{{message}}</h2>-->
    <!--<h2 :style="{fontSize:'20px'}">{{message}}</h2>-->
    <!--<h2 :style="{fontSize:fontsize}">{{message}}</h2>-->
    <h2 :style="{fontSize:fontsize+'px',color:color}">{{message}}</h2>
    <h2 :style="getstyle()">{{message}}</h2>
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:'hello',
            fontsize:50,
            color:'red'
        },
        methods:{
            getstyle:function () {
                return {fontSize:this.fontsize+'px',color:this.color}
            }
        }
    })
</script>

05- v-bind动态绑定style(数组语法)

下例为动态绑定的数组语法的使用方式:

<script src="../js/vue.js"></script>
<div id="app">
    <h2 :style="[style1,style2]">{{message}}</h2>
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:({
            message:'hello',
            style1:{color:'red'},
            style2:{fontSize:'100px'}
        })
    })
</script>
# Vue  

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×