本文已参与「新人创作礼」活动，一起开启掘金创作之路
细讲v-model，学了一段时间，笔记没写感觉忘了好多，写一下下给你们分享，如果有问题评论或者私聊哟，aFang敲代码太无聊啦！！
moudle的基本使用
- 使用v-model实现表单的双向绑定
- v-moudle也可以使用在textare 原理：
- v-bind綁定一個value屬性
- v-on绑定一个input事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单绑定</title>
</head>
<body>
<div id="app">
<!-- <input type="text" v-model ="message">-->
<!-- 第二种办法使用哪个两种方法绑定事件-->
<!-- <input type="text" :value="message" v-on:input="valueChange">-->
<input type="text" :value="message" v-on @input="message= $event.target.value">
<h2> {{message}}</h2>
</div>
<script src="../vue.js"></script>
<script>
const app =new Vue({
el:'#app',
data:{
message:'你好呀'
},
methods:{
valueChange(event){
this.message =event.target.value
}
}
})
</script>
</body>
</html>
input传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三种修饰符的使用</title>
</head>
<body>
<div id="model">
<input type="checkbox" value="qq" v-model="message">qq
<input type="checkbox" value='Mixin' v-model="message">Mixin
<input type="checkbox" value="weibo" v-model="message">weibo
<input type="checkbox" value="skype" v-model="message">skype
<h1>您的爱好是{{message}}</h1>
<h1>您的爱好是{{tool}}</h1>
<label v-for="items in tool" :for="items" >
<input type="checkbox" :value="items" v-model="message" id="items">{{items}}
</label>
<h4>{{message}}</h4>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:'#model',
data:{
tool:['qq','Mixin','weibo','skype'],
message:[]
}
})</script>
</body>
</html>
修饰符的使用
三种修饰符的使用：
- v-model.number 只接受数据输入输出
- v-model.trim 去除输入的首位部分的空格
- v-model.lazy 用户输入完敲回车然后数据再显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三种修饰符的使用</title>
</head>
<body>
<div id="model">
<!--修饰符number-->
<label>
<input type="number" value="message" v-model.number="message">{{message}}
</label>
<h4>{{message}}{{typeof message}}</h4>
<!-- 用戶輸入完再显示v-model.lazy-->
<!-- <label>-->
<!-- <input type="text" value="txt" v-model.lazy="txt">{{txt}}-->
<!-- </label>-->
<!-- <h4>{{txt}}{{typeof txt}}</h4>-->
<!-- 自动删除用户输入的内容中的首尾部空格-->
<!-- 注意是首尾空格-->
<label>
<input type="text" value="txt" v-model.trim="txt">{{txt}}
</label>
<h4>{{txt}}{{typeof txt}}</h4>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:'#model',
data:{
txt:'',
message:1
},
})</script>
</body>
</html>
select
可以实现单选多选 提示多选需要按住control多选然后多选仅需多加一个multiple
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>select</title>
</head>
<body>
<div id="app">
<!-- 单选-->
<select v-model="choice">
<option value="111">111</option>
<option value="222" >222</option>
<option value="333" >333</option>
<option value="444" >444</option>
</select>
<h1>选择是：{{choice}}</h1>
<!-- 多选：按住control才可以多选-->
<select v-model="choices" multiple>
<option value="111">111</option>
<option value="222">222</option>
<option value="333">333</option>
<option value="444">444</option>
</select>
<p>选择是：{{choices}}</p>
</div>
<!--select也是可以做单选也可以做多选-->
<script src="../vue.js"></script>
<script>
const app =new Vue({
el:'#app',
data:{
choice:'apple',
choices:[]
},
})
</script>
</body>
</html>
radio
- 用v-model实现表单的双向绑定
- v-moudle也可以使用在textare
原理
- v-bind綁定一個value屬性
- v-on绑定一个input事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单绑定</title>
</head>
<body>
<!--v-module綁定的是同一個的值時候name可以不要（作用是让选项互斥）-->
<div id="app">
<!-- <input type="text" v-model ="message">-->
<!-- 第二种办法使用哪个两种方法绑定事件-->
<!-- <input type="text" :value="message" v-on:input="valueChange">-->
<label for="male">
<input type="radio" id="male" value="男" v-model="sex">男
</label>
<label for="female" >
<input type="radio" id="female" value="女" v-model="sex">女
</label>
<h2> {{sex}}</h2>
</div>
<script src="../vue.js"></script>
<script>
const app =new Vue({
el:'#app',
data:{
sex:''
},
methods:{
valueChange(event){
this.message =event.target.value
}
}
})
</script>
</body>
</html>
checkbox
可以实现单选多选，比较简单不做多余的论述 下面的 :disabled="!agreement"就是如果agreement为false就是没有勾选的时候就无法点击这个按钮，这个是这个按钮的一个属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-moudleCheckBox</title>
</head>
<body>
<div id="check">
<lable for="agree">
<input type="checkbox" id="agree" v-model="agreement">勾选协议
<h5>同意就进行下一步：{{agreement}}</h5>
<button :disabled="!agreement">下面一步 </button>
</lable>
<!-- <input type="checkbox" id="choice1" value="説話" v-model="hobbbies">説話-->
<!-- <input type="checkbox" id="choice2" value="唱歌" v-model="hobbbies">唱歌-->
<!-- <input type="checkbox" id="choice3" value="跳舞" v-model="hobbbies">跳舞-->
<!-- <input type="checkbox" id="choice4" value="写字" v-model="hobbbies">写字-->
<!--<h4>我的愛好有：{{hobbbies}}</h4>-->
</div>
<script src="../vue.js"></script>
<script>
const app=new Vue({
el:'#check',
data:{
agreement:false
// 将选项用数组储存起来
},
})
</script>
</body>
</html>
