首页 > 代码库 > 2017.04 vue学习笔记---08表单控件绑定---基础用法
2017.04 vue学习笔记---08表单控件绑定---基础用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
margin-bottom: 30px;
}
</style>
<script src="http://www.mamicode.com/js/vue.js"></script>
<script src="http://www.mamicode.com/js/jquery-1.12.3.min.js"></script>
</head>
<body>
1.基础用法
你可以用 v-model 指令在表单控件元素上创建双向数据绑定。
它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，
但 v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。
！important
v模型将忽略初始值,检查或选定的属性上发现任何形式的元素。
它总是把Vue实例数据作为真理的源泉。你应该声明JavaScript一侧的初始值,在选择组件的数据。
！important
对于需要输入法编辑器的语言（中文、日文、韩文等），要注意的是，
在 IME 字母组合窗口输入时 v-model 并不会更新。如果你想在此期间满足更新需求，请使用 input 事件。<br>
<br>
1.1文本
<div id="demo1">
<input v-model="message" placeholder="编辑我">
<p>messages is {{message}}</p>
</div>
1.2多行文本
<div id="demo2">
<span>多行文本是：</span>
<p style="white-space: pre">{{message}}</p>
<br>
<textarea v-model="message" placeholder="添加多个行"></textarea>
</div>
!important 在文本区域插值( <textarea></textarea> ) 并不会生效，应用 v-model 来代替<br>
<br>
1.3复选框
<div id="demo3">
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
</div>
多个勾选框，绑定到同一个数组：<br>
<br>
<div id="demo4">
<input type="checkbox" id="jack" value="http://www.mamicode.com/孙悟空" v-model="checkedNames">
<label for="jack">孙悟空</label>
<input type="checkbox" id="john" value="http://www.mamicode.com/八戒" v-model="checkedNames">
<label for="john">八戒</label>
<input type="checkbox" id="mike" value="http://www.mamicode.com/沙和尚" v-model="checkedNames">
<label for="mike">沙和尚</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
1.4单选
<div id="demo5">
<input type="radio" in="one" value="http://www.mamicode.com/1" v-model="picked">
<label for="one">1</label>
<input type="radio" in="two" value="http://www.mamicode.com/2" v-model="picked">
<label for="one">2</label>
<br>
<span>picked:{{picked}}</span>
</div>
1.5选择列表 select
<h3>单选列表</h3>
<div id="demo6">
<select v-model="selected">
<option disabled value="">选一个大兄弟</option>
<option>a</option>
<option>b</option>
<option>c</option>
</select>
<span>selceted:{{selected}}</span>
</div>
如果你v模型的初始值表达式不匹配的任何选项,<!--<select>-->元素将会呈现在一个“没有选择”状态。
在iOS这将导致用户无法选择第一项,因为iOS不火改变事件在这种情况下。
因此建议禁用选项提供一个空值,显示在上面的例子中。<br>
<br>
<h3>多选列表</h3>
<div id="demo7">
<select v-model="selected" multiple="multiple" style="width:50px;">
<option>a</option>
<option>b</option>
<option>c</option>
</select>
<span>selceted:{{selected}}</span>
</div>
<h3>动态选项，用 v-for 渲染：</h3>
<div id="demo8">
<select v-model="selected">
<option v-bind:class="option.class" v-for="option in options" v-bind:value="http://www.mamicode.com/option.value">{{option.text}}</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
<script>
var demo1 = new Vue({
el:"#demo1",
data:{
message:‘‘
}
});
var demo2 = new Vue({
el:"#demo2",
data:{
message:‘‘
}
});
var demo3 = new Vue({
el:"#demo3",
data:{
checked:‘true‘
}
});
var demo4 = new Vue({
el:‘#demo4‘,
data:{
checkedNames:[]
}
});
var demo5 = new Vue({
el:‘#demo5‘,
data:{
picked:‘‘
}
});
var demo6 = new Vue({
el:‘#demo6‘,
data:{
selected:‘‘
}
});
var demo7 = new Vue({
el:‘#demo7‘,
data:{
selected:[]
}
});
var demo8 = new Vue({
el:‘#demo8‘,
data:{
selected:‘A‘,
options:[
{text:‘one‘,value:"a",class:‘option-01‘},
{text:‘two‘,value:"b",class:‘option-02‘},
{text:‘three‘,value:"c",class:‘option-03‘}
]
}
});
</script>
</body>
</html>
2017.04 vue学习笔记---08表单控件绑定---基础用法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。