02JS高阶函数v-model表单的双向绑定
Posted shawnyue-08
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了02JS高阶函数v-model表单的双向绑定相关的知识，希望对你有一定的参考价值。
目录
javascript高阶函数的使用
JS中的for循环
/* 普通的for循环 */
for (let i = 0; i < this.books.length; i++) {
total += this.books[i].count * this.books[i].price;
}
/* let i in this.books i是索引 */
for (let i in this.books) {
total += this.books[i].count * this.books[i].price;
}
/* let item of this.books item是数组的元素 */
for (let item of this.books) {
total += item.price * item.count;
}
JS中与数组有关的高阶函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/* filter/map/reduce
* filter中的回调函数必须返回一个boolean值,当返回true时函数内部会自动将这次回调的n加入到新的数组中,当返回false时函数内部会过滤掉这次n
* map的回调函数用来处理元素，而filter的回调函数是用来过滤元素，返回原数组中的某些元素
* reduce的回调函数用来对数组进行汇总
* */
//1、filter函数的使用
const nums = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
let newArray = nums.filter(function (n) {
return n % 20 === 0;
});
console.log(newArray);
/* [20, 40, 60, 80, 100] */
//2、map函数的使用
let newArray2 = newArray.map(function (n) {
return n * 2;
});
console.log(newArray2);
/* [40, 80, 120, 160, 200] */
//3、reduce函数的使用,两个参数,第二个参数为初始化值
let total = newArray2.reduce(function (preValue, currValue) {
/* preValue是上一次返回的值 */
return preValue + currValue;
}, 0);
console.log(total);
/* 600 */
/* 4、链式编程 */
let number = nums.filter(function (n) {
return n > 80;
}).map(function (n) {
return n / 2;
}).reduce(function (preValue, currValue) {
return preValue + currValue;
}, 0);
console.log(number);
/* 95 */
/* 5、箭头函数 */
let sum = nums.filter((n) => n > 80).map((n) => n / 2).reduce((preValue, currValue) => preValue + currValue, 0);
console.log(sum);
</script>
</body>
</html>
改进for循环计算总价格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
总价格：{{totalPrice}}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: ‘#app‘,
data: {
books: [
{id: ‘01‘, name: ‘JVM虚拟机规范‘, price: 66, count: 1},
{id: ‘02‘, name: ‘阿里巴巴编程手册‘, price: 33, count: 2},
{id: ‘03‘, name: ‘算法导论‘, price: 101, count: 3},
{id: ‘04‘, name: ‘多线程详解‘, price: 88, count: 4}
]
},
computed: {
totalPrice: function () {
return this.books.reduce((preValue, currValue) => preValue + currValue.count * currValue.price, 0);
}
}
})
</script>
</body>
</html>
v-model表单输入绑定
Vue中使用v-model指令实现表单元素和数据的双向绑定。
v-model的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model</title>
</head>
<body>
<div id="app">
<label for="name"></label>
<input type="text" placeholder="edit me" v-model="message" id="name">
message is : {{message}}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: ‘#app‘,
data: {
message: ‘Hello Vue.js.‘,
}
});
</script>
</body>
</html>
v-model的原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model</title>
</head>
<body>
<div id="app">
<label for="name"></label>
<!-- v-bind:value：单向绑定，v-on:input: 监听输入事件 -->
<!--<input type="text" id="name" placeholder="edit me" v-bind:value="message" v-on:input="valueChange">-->
<input type="text" id="name" placeholder="edit me" v-bind:value="message" v-on:input="message = $event.target.value">
message is : {{message}}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: ‘#app‘,
data: {
message: ‘Hello Vue‘,
},
methods: {
valueChange(event) {
this.message = event.target.value;
}
}
});
</script>
</body>
</html>
你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。
v-model和radio的结合---单选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model</title>
</head>
<body>
<div id="app">
<!-- 当v-model绑定的是同一个数据时,可以没有name属性 -->
<label for="male"></label>
<input type="radio" id="male" v-model="gender" value="男">男
<label for="female"></label>
<input type="radio" id="female" v-model="gender" value="女">女
<br />
<span>你选择了{{gender}}</span>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: ‘#app‘,
data: {
gender: ‘男‘, /* 默认选中 */
}
});
</script>
</body>
</html>
v-model和checkbox的结合---多选框
- 单个复选框：boolean
- 多个复选框：数组类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model</title>
</head>
<body>
<div id="app">
<label for="checkbox"></label>
<input type="checkbox" id="checkbox" v-model="checked">I accept.
<br/>
<span v-if="checked">您选择了同意协议</span>
<span v-else>您没有同意协议</span>
<br/>
<button v-bind:disabled="!checked">下一步</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: ‘#app‘,
data: {
checked: false,
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model</title>
</head>
<body>
<div id="app">
<!-- 一个label绑定一个input -->
<label for="basketball">篮球</label>
<input type="checkbox" id="basketball" value="basketball" v-model="hobbies">
<label for="football">足球</label>
<input type="checkbox" id="football" value="football" v-model="hobbies">
<label for="music">音乐</label>
<input type="checkbox" id="music" value="music" v-model="hobbies">
<label for="film">电影</label>
<input type="checkbox" id="film" value="film" v-model="hobbies">
<br />
<span>您的爱好是:{{hobbies}}</span>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: ‘#app‘,
data: {
hobbies: []
}
})
</script>
</body>
</html>
v-model结合select标签
- 单选：一个值（省市区）
- 多选：爱好
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model</title>
</head>
<body>
<div id="app">
<select v-model="selected">
<option disabled>请选择</option>
<option value="A" >A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<span>你选择了{{selected}}</span>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: ‘#app‘,
data: {
selected: ‘A‘ /* 默认选中 */
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model</title>
</head>
<body>
<div id="app">
<!-- 在选择时需要按住ctrl键 -->
<select multiple v-model="selected">
<option disabled>请选择</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<span>你选择的是：{{selected}}</span>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: ‘#app‘,
data: {
selected: []
}
});
</script>
</body>
</html>
修饰符
.lazy
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步：
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">
.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
<input v-model.number="age" type="number">
.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
<input v-model.trim="msg">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model</title>
</head>
<body>
<div id="app">
<!-- 1、.lazy修饰符 -->
<label for="name">用户名：</label>
<input type="text" id="name" v-model.lazy="message">
<span>message is {{message}}</span>
<br />
<!-- 2、.number修饰符 -->
<label for="age">年龄：</label>
<input type="number" id="age" v-model.number="age">
<span>{{typeof age}}</span>
<br />
<label for="password">密码：</label>
<input type="text" id="password" v-model.trim="password">
<span>{{password}}</span>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: ‘#app‘,
data: {
message: ‘Hello Vue.js.‘,
age: 12,
password: ‘‘
}
});
</script>
</body>
</html>
以上是关于02JS高阶函数v-model表单的双向绑定的主要内容，如果未能解决你的问题，请参考以下文章