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

### html代碼

<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>

### 測試
#### 原先內容

#### 更改值
連上方的msg都被改變，表示完成**雙向綁定**

#### 刪除首尾空格

    <div id="div0">
        <span>{{msg}}</span><br/>
        <!-- trim可以去除首尾空格 -->
        <input type="text" v-model.trim="msg"/>
    </div>