---
# System prepended metadata

title: vue的雙向綁定
tags: [Java Web-vue]

---

# vue的雙向綁定
###### tags: `Java Web-vue`

### html代碼
```htmlembedded=
<div id="div0">
        <span>{{msg}}</span><br/>
        <!--
            v-model指的是双向绑定，
            也就是说之前的v-bind是通过msg这个变量的值来控制input输入框
            现在 v-model 不仅msg来控制input输入框，反过来，input输入框的内容也会改变msg的值
         -->
        <!-- v-model:value 中 :value可以省略，直接写成v-model -->
        <!--完整寫法：v-model:value="vueValue"-->
        <input type="text" v-model="msg"/>
    </div>
```

### 測試
#### 原先內容
![](https://i.imgur.com/yFmtp6R.png)

#### 更改值
連上方的msg都被改變，表示完成**雙向綁定**
![](https://i.imgur.com/00WU5j2.png)

#### 刪除首尾空格
```htmlembedded=
    <div id="div0">
        <span>{{msg}}</span><br/>
        <!-- trim可以去除首尾空格 -->
        <input type="text" v-model.trim="msg"/>
    </div>
```
![](https://i.imgur.com/ZBpElaJ.png)
