Vue.js 教程 (6) : 处理表单
发布在Vue.js 中文入门2014年2月14日view:23027
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

说到的MVVM数据绑定,最神奇的功能应该就是双向绑定了。在 Vue.js 里面双向绑定极其简单,所有的表单元素以及带 contenteditable 的普通元素都只需要一个指令:v-model

<form id="demo">
    <!-- 普通文字输入 -->
    <p><input type="text" v-model="msg"> {{msg}}</p>
    <!-- 多选按钮 -->
    <p><input type="checkbox" v-model="checked"> {{checked ? "yes" : "no"}}</p>
    <!-- 单选按钮 -->
    <p>
        <input type="radio" name="picked" value="one" v-model="picked">
        <input type="radio" name="picked" value="two" v-model="picked">
        {{picked}}
    </p>
    <!-- 单选下拉 -->
    <p>
        <select v-model="selected">
            <option>one</option>
            <option>two</option>
            <option>three</option>
        </select>
        {{selected}}
    </p>
    <!-- 多选下拉 -->
    <p>
        <select v-model="multiSelect" multiple>
            <option>one</option>
            <option>two</option>
            <option>three</option>
        </select>
    </p>
</form>
new Vue({
    el: '#demo',
    data: {
        msg      : 'hi!',
        checked  : true,
        picked   : 'one',
        selected : 'two',
        multiSelect: ['one','three']
    }
})

效果:http://jsfiddle.net/yyx990803/T3Lnf/

评论
发表评论
4年前

想要提交图片的话怎么办呢?

4年前
添加了一枚【评注】:contenteditable无法双向绑定...
5年前

@尤小右 在表单里,如果JS动态设置input的值,model不会做相应的更新操作吗?

5年前

@canjianx 所以 0.11 里面可以用

<select v-model="selected" options="selOption"></select>
5年前
<select v-model="selected">
                <option v-repeat="selOption">{{$value}}</option>
            </select>

这样的写法,render的优先级咋整

5年前

{{$value}} 这样的写法,优先级咋整。

5年前

@心_尘 如果已经使用了 Angular 并且 Angular 符合你的项目需求,那没有必要再用 Vue。Vue 相对于 Angular 主要就是更轻量更专注,只关注 vm 这一块,不包含 router/resource/ajax/DI/module 这些,鼓励用户自己选择和组织解决方案。更多细节见本系列常见FAQ那篇文章。

5年前

很cool,但是我有点儿困惑, vue 这些实现和直接用angular有什么不同呢? 从开发员角度来讲, 我如果已经使用angular, 用 vue 去处理VM 这块儿相对直接用angular有什么优势?

WRITTEN BY
尤小右
不会搞艺术的程序员不是好设计师
TA的新浪微博
PUBLISHED IN
Vue.js 中文入门

Vue.js 是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API,让编写动态的UI界面变得轻松简单。本专栏是Vue.js的中文版入门教程。

我的收藏