v-bind

v-bind 可用于设置元素的属性 
<head>
    <link rel="stylesheet" href="work2.css">
</head>
<body>
    <script src="../vue.js"></script>
    <div id="mydiv">
        <!-- 两种写法均可 -->
        <input type="button" v-bind:value="value">
        <input type="button" :value="value">
        <!-- 变量和字符串拼接 -->
        <input type="button" :value="value + '!'">
        <a :href="link">this is a link</a>
        <input type="button" value="change color" @click="change">
        <!-- 三元表达式 -->
        <div :class="isActive?'active':''">what color am I ?</div>
        <!-- 采用对象的方式（键值对） -->
        <div :class="{active:isActive}">what color am you ?</div>
    </div>
    <script src="work2.js"></script>
</body>
.active {
    color:red
}
var app = new Vue({
    el:'#mydiv',
    data:{
        link:'#',
        value:'my button',
        isActive:false
    },
    methods:{
        change:function() {
            this.isActive = !this.isActive
        }
    }
})

 

posted @ 2022-11-27 09:12  树叶本子  阅读(63)  评论(0)    收藏  举报