vue表单各控件绑定案例使用
javaScript过滤器使用:
对数组的元素进行过滤，使用array.filter(function(n){return true})来进行实现，代码如下：
v-model
常用作表单的控件，对其进行双向绑定
案例: 在输入框中输入信息，同时在下面的文本输入中显示输入的内容
代码如下:
<html>
<head>
<meta charset="utf-8">
<title>vue事件监听练习title>
head>
<body>
<div id="calc">
<input type="text" v-model="msg">
<textarea name="" id="" cols="30" rows="10">{{msg}}textarea>
div>
body>
html>
<script src="./js/vue.js">script>
<script>
let app = new Vue({
el: '#calc'
,data: {
msg: ""
}
,methods:{
}
,computed: {
}
})
script>
运行如下:
event的target.value
上面的双向绑定，也可以使用另外一种方法，在监听函数中，使用event.target.value来获取监听对象的值。代码如下：
<html>
<head>
<meta charset="utf-8">
<title>vue事件监听练习title>
head>
<body>
<div id="calc">
<input type="text" v-on:input="handle($event)">
<textarea name="" id="" cols="30" rows="10">{{msg}}textarea>
div>
body>
html>
<script src="./js/vue.js">script>
<script>
let app = new Vue({
el: '#calc'
,data: {
msg: ""
}
,methods:{
handle(e){
this.msg = e.target.value;
}
}
,computed: {
}
})
script>
运行结果:
v-model结合ratio单选框使用
案例： 使用v-model来让用户选择性别，并且实时进行打印选择的值.
现在有个案例，v-model绑定radio标签，来监听用户勾选的值,代码如下:
<html>
<head>
<meta charset="utf-8">
<title>vue事件监听练习title>
head>
<body>
<div id="calc">
<div>
<h3>请问您的性别是?h3>
<div>
<input type="radio" value="1" name="sexs" v-model="sex">男
<input type="radio" value="0" name="sexs" v-model="sex">女
<input type="radio" value="2" name="sexs" v-model="sex">未知
div>
<a>{{sex_}}a>
div>
div>
body>
html>
<script src="./js/vue.js">script>
<script>
let app = new Vue({
el: '#calc'
,data: {
msg: ""
,sex: ""
,sex_: ""
}
,methods:{
}
,watch: {
sex(){
let sexName ="男孩子";
if(this.sex == 0){
sexName = "女孩子"
}else if(this.sex == 2){
sexName = "未知物种";
}
this.sex_ = "您选择的性别是:"+sexName;
}
}
,computed: {
}
})
script>
运行结果如下：
v-model结合checkbox使用
案例：使用v-model模仿用户勾选游戏协议步骤：
v-model监听checkbox，现在让我们来看看单个复选框的情况：
当单选框的使用情况，代码如下：
<html>
<head>
<meta charset="utf-8">
<title>vue事件监听练习title>
head>
<body>
<div id="calc">
<div>
<h3>点击同意协议即代表您同意用户协议h3>
<div>
<label for="liense">同意游戏协议label>
<input type="checkbox" id="liense" v-model="agree">
div>
<button @click="show" :disabled="!agree">下一步button>
<br>
<a v-if="!agree">请勾选同意协议进行下一步a>
<a v-if="agree">可以进行下一步了a>
div>
div>
body>
html>
<script src="./js/vue.js">script>
<script>
let app = new Vue({
el: '#calc'
,data: {
msg: ""
,agree: false
}
,methods:{
show(){
alert("可以进行下一步了！");
}
}
,computed: {
}
})
script>
运行效果如下;
案例： 使用v-model，用户对自己喜欢的兴趣爱好进行勾选[多个爱好]，并实时输出用户选择的爱好:
多个checkbox情况，勾选你喜欢的爱好兴趣。
代码如下:
<html>
<head>
<meta charset="utf-8">
<title>vue事件监听练习title>
head>
<body>
<div id="calc">
<div>
<h3>请选择您的爱好h3>
<div>
<input type="checkbox" name="h" value="篮球" v-model="hobby">篮球
<input type="checkbox" name="h" value="足球" v-model="hobby">足球
<input type="checkbox" name="h" value="月球" v-model="hobby">月球
<input type="checkbox" name="h" value="板球" v-model="hobby">板球
<input type="checkbox" name="h" value="网球" v-model="hobby">网球
div>
<br>
您喜欢的是
<a>:{{hobby}}a>
div>
div>
body>
html>
<script src="./js/vue.js">script>
<script>
let app = new Vue({
el: '#calc'
,data: {
hobby: []
}
,methods:{
}
,computed: {
}
})
script>
运行效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wIKu0ecu-
v-model结合select的使用:
现在有个案例，现在要让用户选择用户的爱好，使用v-model来解决。
也是分两种情况，第一种是选择一个值:
<html>
<head>
<meta charset="utf-8">
<title>vue事件监听练习title>
head>
<body>
<div id="calc">
<div>
<h3>请选择您的爱好h3>
<div>
<select name="fruits" id="fruits" v-model="selects">
<option v-for="(item,index) in options" :value="item">{{item}}option>
select>
div>
<br>
您选择的水果是:
<a>:{{selects}}a>
div>
div>
body>
html>
<script src="./js/vue.js">script>
<script>
let app = new Vue({
el: '#calc'
,data: {
options:["苹果","香蕉","黄瓜","百香果","荔枝","芒果","李子","西瓜"]
,selects: []
}
,methods:{
}
,computed: {
}
})
script>
运行结果如下:
可以选择多个值的情况:
<html>
<head>
<meta charset="utf-8">
<title>vue事件监听练习title>
head>
<body>
<div id="calc">
<div>
<h3>请选择您的爱好h3>
<div>
<select name="fruits" id="fruits" v-model="selects" multiple>
<option v-for="(item,index) in options" :value="item">{{item}}option>
select>
div>
<br>
您选择的这些水果是:
<a>:{{selects}}a>
div>
div>
body>
html>
<script src="./js/vue.js">script>
<script>
let app = new Vue({
el: '#calc'
,data: {
options:["苹果","香蕉","黄瓜","百香果","荔枝","芒果","李子","西瓜"]
,selects: []
}
,methods:{
}
,computed: {
}
})
script>
运行结果:
v-model结合修饰符的使用
案例：
| 修饰符名称 | 作用 |
|---|---|
| lazy | 名为懒惰，就是不会实时更新双向绑定的另外一个值。 |
| number | 让用户输入数字时，他自动解释绑定的变量类型 |
| trim | 左右两边的空格。这个简单 |
修饰符lazy使用代码如下：
<html>
<head>
<meta charset="utf-8">
<title>vue事件监听练习title>
head>
<body>
<div id="calc">
<div>
<h3>请选择您的爱好h3>
<div>
<input type="text" v-model.lazy="message" >
div>
<br>
<a>{{message}}a>
div>
div>
body>
html>
<script src="./js/vue.js">script>
<script>
let app = new Vue({
el: '#calc'
,data: {
message: "Hi"
}
,methods:{
}
,computed: {
}
})
script>
运行结果如下：
惊讶的发现，当给v-model加了lazy属性后，数据的双向绑定不会随着我们的输入而同时更新数值，而是当我们离开输入框焦点后，双向绑定的值才会同时更新。
下面来使用number属性:
<html>
<head>
<meta charset="utf-8">
<title>vue事件监听练习title>
head>
<body>
<div id="calc">
<div>
<h3>请选择您的爱好h3>
<div>
<input type="text" v-model.number="message" >
div>
<br>
<a>绑定的变量的数据类型:{{typeof message}}a>
div>
div>
body>
html>
<script src="./js/vue.js">script>
<script>
let app = new Vue({
el: '#calc'
,data: {
message: "Hi"
}
,methods:{
}
,computed: {
}
})
script>
运行结果如下：
Vue组件化的实现和使用步骤
注册组件的基本步骤
- 创建组件构造器
- 注册组件
- 使用组件
