04Vue.js的表单使用
2018-04-15 本文已影响0人
个人不完美
Vue的表单操作方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue表单操作写法</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 在输入框里面输入a 则input禁用-->
<!-- :disabled 这个vue里面特有的语法糖写法等同于V-bind:disabled-->
<input type="text" :disabled="value=='a'" v-model="value">
<!-- 复选框 -->
<label><input type="checkbox" v-model="flag">{{flag}}</label>
<!-- 选择对应的复选框的值 -->
<label><input type="checkbox" v-model="flagN" value="0">a</label>
<label><input type="checkbox" v-model="flagN" value="1">b</label>
<label><input type="checkbox" v-model="flagN" value="2">c</label>
<span>{{flagN}}</span>
<!-- 单选框 -->
<input type="radio" v-model="radioP" name="test" value="0">男
<input type="radio" v-model="radioP" name="test" value="1">女
<span>{{radioP}}</span>
<!-- select下拉列表框 -->
<select v-model="selected">
<option v-for="item in items" :value="item.value">{{item.text}}</option>
</select>
<span>{{selected}}</span>
<!-- 修饰符 -->
<input type="text" v-model.trim="msg">
<input v-model.number="num" type="number"><!--只能输入数值 -->
</div>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
msg:'hello',
num:20,
value:'',
flag:false,
flagN:['1'], //checkbox默认选中
radioP:'0', //radio默认选中
items:[
{
text:'老师',
value:'a'
},
{
text:'学生',
value:'b'
},
{
text:'家长',
value:'c'
}
],
selected:''
},
methods: {
//这里放置方法、事件
}
})
</script>
</body>
</html>
