您的位置：首页 > 产品设计 > UI/UE

Vue.js -表单控件绑定

2017-08-29 00:00 916 查看
基础用法
你可以用v-model指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素，但v-model本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子，v-model 会忽略所有表单元素的value 、checked、selected特性的初始值。因为它会选择Vue实例数据来作为具体的值。你应该通过JavaScript在组件的data选项中声明初始值
文本

<body class="">
<div id="example-1">
<input type="text" v-model="message" placeholder="edit me">
<p>{{message}}</p>
</div>
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#example-1",
data:{
message:""
}
})
</script>
</body>


多行文本

<body class="">
<div id="example-1">
<span>multiline message is:</span>
<p style="white-space:pre-line">{{message}}</p>
<textarea v-model="message" cols="30" rows="10" placeholder="add multiple lines"></textarea>
</div>
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#example-1",
data:{
message:""
}
})
</script>
</body>

//pre-line 合并空白符序列，但是保留换行符，意思是单词之间如果有多个空格，合并成一个空格，按回车键换行

在文本区域插值（<textarea></textarea>）并不生效，应用v-model来代替 ，即<textarea></textarea>不能使用{{message}这种形式

复选框
单个复选框，逻辑值

<body class="">
<div id="example-1">
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{checked}}</label>
</div>
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#example-1",
data:{
checked:true
}
})
</script>
</body>


多个复选框，绑定到同一个数组，并把选中的按列表显示出来例子

<body class="">
<div id="example-1">
<input type="checkbox" id="jack" value="jack" v-model="checkedNames">
<label for="jack">jack</label>
<input type="checkbox" id="join" value="join" v-model="checkedNames">
<label for="join">join</label>
<input type="checkbox" id="lily" value="lily" v-model="checkedNames">
<label for="lily">lily</label>
<ul>
<li v-for="item in checkedNames">{{item}}</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#example-1",
data: {
checkedNames: []
}
})
</script>
</body>

单选按钮

<body class="">
<div id="example-1">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<div>{{picked}}</div>

</div>
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#example-1",
data: {
picked: "One"
}
})

</script>
</body>

//选中时显示的是value的值，通过v-model 指向同一个picked,就表明这几个单选框是一组

选中列表
单选列表

<body class="">
<div id="example-1">
<select v-model="selected">
<option value="" disabled>请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<div>选择了:{{ selected }}</div>
</div>
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#example-1",
data: {
selected: ""
}
})
//在下拉列表中，请选择的value属性设置为空，否则option初始化显示为空，其余的option的value属性不设置，也不能设置为空，因为显示的内容优先显示value的值而不是option的内容
</script>
</body>

如果v-model表达初始的值不匹配任何选项（为空），select元素会以“未选中”的状态渲染，像以上提供的disabled选项是建议的做法

动态选项，用v-for渲染

<body class="">
<div id="example-1">
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">{{option.text}}</option>
</select>
<div>选择了:{{ selected }}</div>
</div>
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#example-1",
data: {
selected: "A",
options: [
{ text: "one", value: "A" },
{ text: "two", value: "B" },
{ text: "three", value: "C" },
]
}
})
</script>
</body>


对于单选按钮，勾选框及选择列表选项，v-model绑定的value通常是静态字符串（对于复选框是逻辑值）
<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">

<!-- `toggle` 为 true 或 false,单个的复选框toggle只能是true或者false,多个的话可以绑定到一个数组并分别设置value -->
<input type="checkbox" v-model="toggle">

<!-- 当选中时，`selected` 为字符串 "abc" 如果option没有value属性 则`selected` 为字符串 "ABC"-->
<select v-model="selected">
<option value="abc">ABC</option>
</select>

但是有时我们想绑定value到Vue实例的一个动态属性上，这时可以用v-bind实现，并且这个属性的值可以不是字符串，而是表达式，

复选框 当选中复选框时显示的是"your selected"

<body class="">
<div id="example-1">
<input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b">
<div>{{toggle}}</div>
</div>
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#example-1",
data: {
toggle:"",
a: "your selected",
b: "not select"
}
})
</script>
</body>

单选按钮

<body class="">
<div id="example-1">
<input type="radio" v-model="pick" v-bind:value="a" >
<input type="radio" v-model="pick" v-bind:value="b" >
<div>{{pick}}</div>
</div>
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#example-1",
data: {
pick:"",
a: "your selected a",
b: "your selected b",

}
})
</script>
</body>

选择列表设置

<body class="">
<div id="example-1">
<select v-model="selected">
<option v-bind:value="{number:1234}">123</option>
</select>
<div>{{selected.number}}</div>
</div>
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#example-1",
data: {
selected: "",
}
})
</script>
</body>


修饰符
.lazy

默认情况下，v-model 在input事件中同步输入框的数据，但你可以添加一个修饰符lazy,从而转变为在change事件中同步，当输入完，点击其它地方

<body class="">
<div id="example-1">
<input v-model.lazy="msg">
<div>{{msg}}</div>
</div>
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#example-1",
data: {
msg: "",
}
})
</script>
</body>

.number
如果想自动将用户输入值转为Number类型（如果原值的转换结果为NaN则返回原值），可以添加一个修饰符number给v-model来处理输入值
<input v-model.number="age" type="number">

.trim
如果要自动过滤用户输入的首尾空格，可以添加trim修饰符到v-model上过滤输入
<input v-model.trim="msg">
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航