当前位置:   article > 正文

Vue的学习之class与style绑定

Vue的学习之class与style绑定
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Vue的学习</title>
  6. <script src="vue.js" type="text/javascript" charset="utf-8"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10. <!-- test是一个普通的css的样式 -->
  11. <!-- v-bind对class样式进行绑定,
  12. 通过isActive来判断是否对样式的修饰 -->
  13. <!-- v-bind:class="{active:isActive,gree:isGree}" -->
  14. <!-- 第二种方式,也可以通过元组里面
  15. 调用三目运算的方式进行修饰 -->
  16. <div class="test" v-bind:class="[isActive?'active':'',isGree?'gree':'']" style="width: 200px;height: 200px;
  17. text-align: center;line-height: 200px;">hi Vue</div>
  18. <br />
  19. <!-- 通过v-bin绑定style样式 -->
  20. <div :style="{color:color,fontSize:fontsize,
  21. background:isRed?'red':''}
  22. ">hello Ryan</div>
  23. </div>
  24. <script type="text/javascript">
  25. var vm = new Vue({
  26. el: "#app",
  27. data: {
  28. isActive: true,
  29. isGree: true,
  30. color: "blue",
  31. fontsize: '30px',
  32. isRed: false,
  33. }
  34. });
  35. </script>
  36. <style type="text/css">
  37. .test {
  38. font-size: 30px;
  39. }
  40. .active {
  41. background: red;
  42. }
  43. .gree {
  44. color: green;
  45. }
  46. </style>
  47. </body>
  48. </html>

本节对class与style的绑定内容就学习完毕了!!!

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop】
推荐阅读
相关标签
  

闽ICP备14008679号