前言

当前系统有几个页面用到了大量的表单,要先从后台取出数据,然后填充表单,最后异步提交,用 jquery 写了很多代码,现在用 Vue 重构,MVVM 框架,展现你真正的实力吧!

数据单向流动

将 input 标签用 v-model 绑定到 Vue 的 data 对象上,例如下面的 select 标签.在取到数据后,将数据传递给 toastoptions ,在 option 标签中使用
v-for 指令循环创建内容.因为数据绑定,Vue 实例的 toasts 对象值就是我们选择的 option value ,当我们需要改变 html 内容时, 只需要改变data 即可,变动会被映射到绑定的视图中


<select class="select" name="toasts"
    v-model="toasts">
<option v-for="option in toastoptions" 
v-bind:value="option.id">
    \{\{option.name\}\}
</option>
</select>

 data: {
    toastoptions:[],
          toasts: "",
    }