文章目录
一、JavaScript高阶函数
1. filter()
filter()
方法里面接收一个回调函数, 在每一次遍历的时候都会执行一次回调函数.
filter()
会把每次遍历的数字都放到回调函数里面, 所以回调函数需要定义一个形参来接收.
filter()
中的回调函数必须返回一个布尔值. 当返回true时, 函数内部会自动将这次回调的n加入到新的数组中.
<script>
let nums = [12, 222, 544, 33, 99];
const newNums = nums.filter(function(num) {
return num > 100;
})
console.log(newNums);
</script>
2. map()
filter()
方法里面接收一个回调函数, 在每一次遍历的时候都会执行一次回调函数.
filter()
中的回调函数返回处理后的数据, 函数内部会自动将这次处理后的数据加入到新的数组中.
<script>
let nums = [12, 222, 544, 33, 99];
const newNums = nums.map(function(num) {
return num * 2;
})
console.log(newNums);
</script>
3. reduce
reduce对数组中所有的内容进行汇总
<script>
let nums = [12, 222, 544, 33, 99];
// 这里的0表示给第一次遍历时的preValue赋一个初始值
let total = nums.reduce(function (preValue, n) {
return preValue + n
}, 0)
</script>
二、表单绑定v-model
表单控件在实际开发中是非常常见的, 特别是对于用户信息的提交. 需要大量的表单
Vue中使用v-mode指令来实现表单元素和数据的双向绑定.
<body>
<div id="app">
<div>
<h2>{{message}}</h2>
</div>
<input type="text" v-model="message">
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "v-model的使用"
}
})
</script>
</body>
之前做过一个输入快递单号的案例, 使用v-model可以很容易的实现此功能.
1. v-model的解析
当我们在输入框输入内容时.
因为input中的v-model绑定了message, 所以会实时将输入的内容传递给message, message发送改变
当message发送改变时, 因为上面我们使用Mustache语法, 将message的值插入到DOM中, 所以DOM会发送响应的改变.
2. 不使用v-model实现动态改变
<body>
<div id="app">
<input type="text" :value="message" @input="chageMe">
<h2>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "哈哈哈"
},
methods: {
chageMe() {
this.message = event.target.value;
}
},
})
</script>
</body>
二、v-model结合radio类型使用
<body>
<div id="app">
<!-- v-model传递给sex的是value里面的数据 -->
<input type="radio" id="nan" value="男" v-model="sex"> 男
<input type="radio" id="nv" value="女" v-model="sex"> 女
<h3>{{sex}}</h3>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
sex: '',
}
})
</script>
</body>
如果v-model绑定的是同一个变量, 那么此时这两个input就是互斥的, 可以不添加name.
给sex一个默认值 ‘男’, 由于v-model是双向绑定, 所以value为男的对应的input会默认选中.
二、v-model结合checkbox类型使用
1. checkbox单选框
<body>
<div id="app">
<label for="agree">
<input type="checkbox" id="agree" v-model="isAgree">同意协议
</label>
<h2>您选择的是{{isAgree}}</h2>
<button :disabled="!isAgree">下一步</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
isAgree: false,
}
})
</script>
</body>
2. checkbox多选框
<body>
<div id="app">
<input type="checkbox" value="篮球" v-model="hobbies">篮球
<input type="checkbox" value="足球" v-model="hobbies">足球
<input type="checkbox" value="排球" v-model="hobbies">排球
<input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
<input type="checkbox" value="橄榄球" v-model="hobbies">橄榄球
<h2>您的选择是{{hobbies}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
hobbies: []
}
})
</script>
</body>
三、v-model结合select类型使用
选择单个
<body>
<div id="app">
<select name="abc" id="fruit" v-model="fruit">
<option value="香蕉">香蕉</option>
<option value="葡萄">葡萄</option>
<option value="苹果">苹果</option>
<option value="草莓">草莓</option>
</select>
<h2>您的选择是: {{fruit}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
fruit: '香蕉'
}
})
</script>
</body>
选择多个
<body>
<div id="app">
<select name="abc" v-model="fruits" multiple>
<option value="香蕉">香蕉</option>
<option value="葡萄">葡萄</option>
<option value="苹果">苹果</option>
<option value="草莓">草莓</option>
</select>
<h2>您的选择是: {{fruits}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
fruit: '香蕉',
fruits: []
}
})
</script>
</body>
四、值绑定
就是v-bind在input中的应用
<body>
<div id="app">
<label v-for="item in hobbieValues" :for="item">
<input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
</label>
<h2>您的选择是: {{hobbie}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
hobbies: [],
hobbieValues: ['蓝旗', '绿旗', '彩旗', '黄旗']
}
})
</script>
</body>
五、v-model修饰符的使用
1. lazy修饰符
默认情况下, v-model默认是在input事件中同步输入框的数据的.
一旦有数据发送改变对应的data中的数据就会自动发送改变
lazy修饰符可以让数据在失去焦点或者回车时才会更新.
<body>
<div id="app">
<input type="text" v-model.lazy="hobbies">
<h2>{{hobbies}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
hobbies: '',
}
})
</script>
</body>
2. number修饰符
默认情况输入框中无论是数字还是字母, 都会被当做字符串类型进行处理
但是如果我们希望处理的是数字类型, 最后直接将内容当做数字处理
number修饰符可以让在输入框中输入的内容自动转成数字类型.
<body>
<div id="app">
<!-- number修饰符的使用 -->
<input type="number" v-model.number="age">
<h2>{{typeof hobbies}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
age: '',
},
})
</script>
</body>
3. trim修饰符
如果输入的内容首尾有很多空格, 可以使用trim修饰符过滤内容左右两边的空格
<body>
<div id="app">
<!-- lazy修饰符的使用 -->
<!-- <input type="text" v-model.lazy="hobbies"> -->
<!-- <h2>{{hobbies}}</h2> -->
<!-- number修饰符的使用 -->
<!-- <input type="number" v-model.number="age"> -->
<!-- <h2>{{typeof hobbies}}</h2> -->
<!-- trim修饰符的使用 -->
<input type="text" v-model.trim="age">
<h2>{{age}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
age: '',
},
})
</script>
</body>