Vue基础语法之v-bind
2019-05-13 本文已影响0人
最底层的技术渣
一、js文件
var app = new Vue({
el:'#app',
data:{
url:"http://www.baidu.com",
img:"https://www.baidu.com/img/bd_logo1.png",
kClass:"btn btn-default",
isTrue:true
}
});
二、html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active{
background: brown;
}
</style>
</head>
<body>
<div id="app">
<div>
<!--<a :class="kClass" :href="url" target="_blank">-->
<a :class="{active:isTrue}" :href="url" target="_blank">
链接
<!--<img :src="img" alt=""> -->
</a>
</div>
</div>
</body>
<script src="lib/js/vue.js"></script>
<script src="asset/js/main.js"></script>
</html>
三、效果展示
四、代码对比
五、备注：
v-bind: 可以简写为 :
