02.VUE學習二之資料繫結
阿新 • • 發佈：2019-01-05
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>vue</title> <link rel="stylesheet" href=""> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- <script type="text/javascript" src="../js/vue.js"></script> --> <style type="text/css"> .red{ color: red; } .hd{ color: green; } #y{ color: yellow; } </style> </head> <body> <div id="vue"> <!-- v-bind:class="" 是繫結的class意思(可以寫成 :class="") v-bind:id="" 是繫結id的意思(可以寫成 :id="") --> <h1 v-bind:class="red" >VUE</h1> <!-- 這裡red是變數,從下面的data裡取值 --> <h1 :class = "hd">VUE</h1> <!-- 這裡hd加上單引號後,hd就是字串了,就是class="hd"的意思 --> <h1 :class = "'hd'">VUE</h1> <h1 v-bind:id="y">VUE</h1> </div> </body> <script type="text/javascript"> var app=new Vue({ el:'#vue', data:{ red:'red', hd:'hd', y:'y', } }); </script> </html>
效果:
