# 再体验
需求：在输入框输入数据，会显示到`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`
