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
}
}
})
标签：what,color,bind,am,link,isActive From： https://www.cnblogs.com/daxiangcai/p/16929002.html