Vue:v-bind指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .active{ text-decoration: none; color: #00a1d6; } </style> </head> <body> <div id="app"> <a v-bind:class="{active: isActive}" v-bind:href="url">Click <!--<img v-bind:src="img" alt="">--> </a> </div> <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script> <script> var app=new Vue({ el:"#app", data:{ url:"http://baidu.com", // img:"https://dummyimage.com/100x100/ffcc00/ffffff" isActive:true } }) </script> </body> </html>
v-vind:class="{active: isActive}"
键为为标签增添的类,当isAcive为true时,为标签添加active类
v-bind:属性, 可以简写为:属性