62 lines
820 B
Markdown
62 lines
820 B
Markdown
## 輸出
|
|
{{message}}
|
|
|
|
## 迴圈
|
|
v-for
|
|
|
|
```javascript
|
|
<li v-for="item in list">{{ item }}</li>
|
|
```
|
|
|
|
## 輸入雙向綁定：`v-model`
|
|
```html
|
|
<input v-model="message">
|
|
```
|
|
|
|
```javascript
|
|
var app = Vue.createApp({
|
|
data: function() {
|
|
return {
|
|
message: "要被綁定的訊息"
|
|
}
|
|
}
|
|
});
|
|
```
|
|
|
|
## 事件：`v-on`
|
|
|
|
```html
|
|
<button v-on:click="testEvent">按我</button>
|
|
```
|
|
|
|
```javascript
|
|
var app = Vue.createApp({
|
|
method: {
|
|
testEvent: function() {
|
|
alert("你按了button");
|
|
}
|
|
}
|
|
});
|
|
```
|
|
|
|
|
|
## 條件式：`v-if`
|
|
|
|
```html
|
|
<div v-if="isShow"></div>
|
|
```
|
|
|
|
```javascript
|
|
var app = Vue.createApp({
|
|
data: function() {
|
|
return {
|
|
message: "要被綁定的訊息",
|
|
isShow: true
|
|
}
|
|
}
|
|
});
|
|
```
|
|
|
|
## 屬性綁定
|
|
### `v-bind`
|