<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js/vue.js"></script> </head> <style> .red{ color:red; } .classA{ background-color: #00ad9c; } .classB{ color:#00ff00; } .classC{ width:100px; height: 100px; } </style> <body> <div id="app"> <img v-bind:src="message"> <!--<img :src="message"> 上面的简写方式 :--> <div :class="{red:isred}">11111</div> <div :class="[classA,classB]">5555555</div> <div :class="{'classA':isA,'classB':isB}">33333</div> <div :class="['classA',{'classC':isC,'classB':isB}]">88888</div> <div :style="{fontSize:size+'px'}">66666</div> <div :style="[styleA,styleB]">99999</div> </div> <script> new Vue({ el:"#app", data:{ message:"../images/010-2.png", isred:false, classA:"classA", classB:"classB", isA:true, isB:true, isC:true, size:60, styleA:{ color:'red' }, styleB:{ fontSize:'30px' } } }) </script> </body> </html>
v-bind
最新推荐文章于 2024-09-07 18:24:38 发布