v-bind 元素属性绑定
<body>
<div id="app">
<img v-bind:src="imgUrl" >
<a v-bind:href="url">百度一下</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
// let(变量) / const(常量)
let app = new Vue({
el:"#app", // 用于挂载要管理的元素
data:{ // 定义数据
message:'你好',
imgUrl:"data:image/jpeg;base64,/9j",
url:"http://www.baidu.com"
},
methods:{ // 定义方法
}
})
</script>
</body>
动态绑定class 对象语法
<div id="app">
<!-- <h2 v-bind:class="{类名1:true,类名2:boolean}">{{message}}</h2> -->
<!-- 对象语法 -->
<h2 v-bind:class="{active:active,line:false}">{{message}}</h2>
<button v-on:click="btnClick">按钮</button>
</div>
<script src="vue.js"></script>
<script type="text/javascript">
// let(变量) / const(常量)
let app = new Vue({
el:"#app", // 用于挂载要管理的元素
data:{ // 定义数据
message:'你好',
active:'active'
},
methods:{ // 定义方法
btnClick:function(){
this.active = !this.active
}
}
})
</script>
<div id="app">
<!-- 数组语法 -->
<h2 v-bind:class="getClasses()">{{message}}</h2>
<h2 v-bind:class="['active']">{{message}}</h2>
<button v-on:click="btnClick">按钮</button>
</div>
<script src="vue.js"></script>
<script type="text/javascript">
// let(变量) / const(常量)
let app = new Vue({
el:"#app", // 用于挂载要管理的元素
data:{ // 定义数据
message:'你好',
active:'active'
},
methods:{ // 定义方法
btnClick:function(){
this.active = !this.active
},
getClasses:function(){
return {active:this.active}
}
}
})
</script>