# 再體驗
需求：在輸入框輸入數據，會顯示到`span`元素內部。也通過`js`和`vue`版去對比學習。
## js版
```html
<div>
<input type="text" id="input">
<span id="box"></span>
</div>
<script>
var oinput = document.getElementById('input')
var obox = document.getElementById('box');
oinput.oninput = function () {
obox.innerHTML = this.value;
}
</script>
```
## Vue版
```html
<div id="app">
<input type="text" v-model="str">
<span>{{ str }}</span>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
str:'你好'
}
})
</script>
```
**注意事項**
> 這里面的`v-model` 其實就是專門 針對表單元素做的處理方式
> el綁定的元素不可以是`body`或者`html`
