Vue的入門——基本語法（上）
阿新 • • 發佈：2022-04-11
Vue 基本語法
(一) 宣告式渲染
一般簡單的語法是兩組大括號包裹值，來宣告式地將資料渲染進 DOM 的系統，接下來是指令式。
繫結元素的方式：使用指令
<title>Title</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head> <body> <div id="hello"> <span v-bind:title="content"> 滑鼠懸停幾秒鐘檢視此處動態繫結的提示資訊！</span> </div> <script> var vm = new Vue({ el: "#hello", data: { content: "哈哈哈哈哈哈哈哈" ,
}, }); </script>
觀察結果，我們將滑鼠懸停在文字上方，被繫結的資料就會出現
看到的 v-bind attribute 被稱為指令。指令帶有字首 v-，以表示它們是 Vue 提供的特殊 attribute，程式碼的意思就是將這個元素節點的 title
content property 保持一致”
如果在控制檯進行修改 vm.content 的值，繫結的資料會發生變化
注：使用 v-bind 需要頭部引入一個約束
(二) 條件判斷
條件判斷使用的指令就是 v-if 、v-else-if、v-else
先看兩個例子，首先是對於 true 或者 false 的判斷
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <divid="hello-3"> <h2 v-if="isBoy">是男孩</h2> <h2 v-else>是女孩</h2> </div> <script> var vm = new Vue({ el: "#hello-3", data: { isBoy: true, }, }); </script>
預設顯示是的是男孩，在控制檯修改為false，即使女孩
對於值的判斷，我們拿一個比較成績的例子，數值不夠嚴謹，理解就好。
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <div id="hello-3"> <h2 v-if="score < '60'">成績不及格</h2> <h2 v-else-if="score >= '60' && score < '80'">成績及格</h2> <h2 v-else>成績優秀</h2> </div> <script> var vm = new Vue({ el: "#hello-3", data:{ score: 66 } }) </script>
預設數值是66，在控制檯修改數值，即可判斷後輸出資料。