<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue表单操作</title>
<style>
.red{
color: red;
}
.size{
font-size: larger;
}
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<!-- 表单数据操作 -->
<div>
<input type="text" v-model="input_obj.input_str" />
<p>文本框输入的值: {{input_obj.input_str}}</p>
<textarea v-model="input_obj.textarea_str"></textarea>
<p>多行框输入的值: {{input_obj.textarea_str}}</p>
<br />
<input type="checkbox" id="jack" value="Jack" v-model="input_obj.checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="input_obj.checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="input_obj.checkedNames">
<label for="mike">Mike</label>
<p>多选框输入的值: {{input_obj.checkedNames}}</p>
<div v-for="(item, index) in input_obj.for_checked" :key="index" >
<input type="checkbox" :value="item.ID" v-model="input_obj.for_checkedNames" >
<label for="checkbox">{{item.ID}}:{{ item.name }}</label>
</div>
<p>当前循环多选: {{input_obj.for_checkedNames}}</p>
<div id="example-4">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>当前单选按钮结果: {{picked}}</span>
</div>
<div v-for="(item, index) in input_obj.for_checked" :key="index">
<input type="radio" :value="item.ID" v-model="picked">
<label for="one">{{item.name}}</label>
</div>
<span>当前循环单选按钮结果: {{picked}}</span>
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>当前下拉框结果: {{ selected }}</span>
<select v-model="selected1">
<option disabled value="">请选择</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
<span>当前下拉框结果: {{ selected1 }}</span>
<select v-model="selected2">
<option disabled value="">请选择</option>
<option :value="item.ID" v-for="(item, index) in input_obj.for_checked">{{item.name}}</option>
</select>
<span>当前循环下拉框结果: {{ selected2 }}</span>
</div>
<!-- 表单修饰符操作 -->
<!--
number:转化为数值
trim:去掉开始和结束的空格
lazy:将input事件切换为change事件(输入框失去焦点.才进行双向绑定)
-->
<input type="text" v-model.number="age" />
<input type="text" v-model.trim="info" />
<input type="text" v-model.lazy="msg" />
<div>{{msg}}</div>
</div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
input_obj:{
input_str:'',
textarea_str:'',
checkedNames:[],
for_checked:[{
ID:1,
name:'1号'
},
{
ID:2,
name:'2号'
}],
for_checkedNames:[]
},
picked:'',
selected:'',
selected1:'',
selected2:'',
age:0,
msg:''
},
methods: {
}
})
</script>
</html>
