发布时间:2023-03-18 12:30
需求:(全部 动作 喜剧 谍战 历史)点击谁谁加粗。
<body>
<div id="app">
//注意:template上面不能写 :key
<template v-for="(item,index) in movies"> //遍历数组
<strong :key="index" v-if="item == current">{{item}}</strong>
<span :key="index" v-else @click="current=item">{{item}}</span>
</template>
</div>
<script src="/lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
movies: ['全部', '动作', '喜剧', '谍战', '历史'],
current:'全部'
}
}
})
</script>
</body>
<style>
//加边距
#app>* {
margin-left: 20px;
}
//设置样式
.active{
color:#ffffff;
background-color: tomato;
}
</style>
</head>
<body>
<div id="app">
<span v-for="item in movies" :key="item" :class="{active:item==current}"
@click="current=item"> {{item}} </span>
//赋值运算符,将右边的值赋值给左边的变量。
</div>
<script src="/vue.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
movies: ['全部', '动作', '喜剧', '谍战', '历史'],
current: '全部'
}
}
})
</script>
</body>
<body>
<div id="app">
<thead>
<table>
<tr>
<td>商品编号</td>
<td>商品名称</td>
<td>商品单价</td>
<td>商品数量</td>
<td>商品总价</td>
<td>商品操作</td>
</tr>
</thead>
<tbody>
<tr>
//1.数组every方法
<td v-if="goodsData.every(item=>item.count==0)">购物车为空</td>
</tr>
<template v-for="(item,index) in goodsData">
<!-- 设立判断条件:数量大于0为真就显示 -->
<tr v-if="item.count >=0" :key="item._id">
<td>{{item._id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button @click="item.count--">-</button>
<span>{{item.count}}</span>
<button @click="item.count++">+</button>
</td>
<td>{{item.price*item.count}}</td>
//2.数组splice方法
<td><button @click="goodsData.splice(index,1)">删除</button></td>
</tr>
</template>
</tbody>
</table>
//思考:为什么渲染totalPrice要加()
<p>合计:{{totalPrice()}}</p>
</div>
<script src="/vue.js"></script>
<script>
new Vue({
el: "#app",
data() {
return {
goodsData: [
{ _id: 1, name: '苹果', price: '20', count: 10 },
{ _id: 2, name: '芒果', price: '10', count: 20 },
{ _id: 3, name: '香蕉', price: '30', count: 30 },
{ _id: 4, name: '梨子', price: '15', count: 40 }
]
}
},
//计算总价
methods: {
totalPrice() {
// 3.数组reduce累加方法
return this.goodsData.reduce((sum, item) => {
return sum + item.price * item.count;
}, 0)
}
},
})
</script>
</body>
every()方法:对数组中的每一个元素进行比对,全为true结果返回true。some()方法则是只要有一个结果为true结果就返回true。
语法:array.every(function(currentValue,index,arr), thisValue)
value :必须,当前元素的值。
index:可选,当前元素的索引值。
arr:可选,当前元素属于的数组对象。
var arr=[10,30,40];
var flag = arr.every(function(value){
return value > 9;
//箭头函数写法:var flag = arr.every(value=> value > 9)
})
console.log(flag); //输出ture
splice()方法:用于添加或删除数组中的元素。
语法:array.splice(index,howmany,item1,.....,itemX)
index:起始下标位置(必选)。
例:
goodsData.splice(2,2)//从第三个位置删除后两个元素
goodsData.splice(2,1,"apple")//从第三个位置删除一个元素并添加apple
reduce()方法:接收一个函数作为累加器。
语法:array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
参数:
例:
var arr = [3,9,4,3,6,0,9];
var sum = arr.reduce((total,currentValue)=>{
return total+currentValue
},0)
console.log(sum); //输出34
<style>
.done {
color: red;
text-decoration: line-through;
}
.btns>*{
margin-right: 10px;
}
</style>
</head>
<body>
<div id="app">
<ul>
//遍历筛选后的数组
<template v-for="item in filterLists">
<li class="done" v-if="item.done" @click="item.done = !item.done">{{item.text}}</li>
<li v-else @click="item.done = !item.done">{{item.text}}</li>
</template>
//用v-bind:class绑定style样式改写:
//
//@click="item.done = !item.done"> {{item.text}}
</ul>
<div class="btns">
<template v-for="item in btns">
<span v-if="item==current">{{item}}</span>
<a href="#" v-else @click="current=item">{{item}}</a>
</template>
<br>
<br>
<span>已完成:{{doneTotal}}/{{lists.length}}</span>
</div>
</div>
<script src="/vue.js"></script>
<script>
new Vue({
el: "#app",
data() {
return {
//需要记录数据和其状态(完成或者未完成)因此用数组包对象
lists: [
{ text: 'HTML', done: false },
{ text: 'CSS', done: true },
{ text: 'JS', done: false },
],
btns: ['全部', '已完成', '未完成'],
current: '全部'
}
},
//1.数组filter()方法
//2.switch语句
computed:{
filterLists(){
switch (this.current){
case '已完成' : return this.lists.filter(item=>item.done);
break;
case '未完成' : return this.lists.filter(item=>!item.done);
break;
default:return this.lists;
}
},
//已完成的长度
doneTotal(){
return this.lists.filter(item => item.done).length;
}
}
})
</script>
</body>
</html>
<input type="text" v-model="addText">
<button @click="addTodo">addTo</button>
data() {
return {
lists: [
{ text: 'HTML', done: false },
{ text: 'CSS', done: true },
{ text: 'JS', done: false },
],
btns: ['全部', '已完成', '未完成'],
current: '全部',
addText:'' //设置输入框默认为空
}
},
//省略大部分代码。。。
methods: {
addTodo(){
this.lists.push({
text:this.addText,
done:false
});
//输入后清空输入框
this.addText='';
}
},
push()方法:向数组末尾(添加到开头则用unshift)添加一个或多个元素,并返回新的长度。
语法:
array.push(item1, item2, ... itemX)
filter()方法 :用于对数组进行过滤(创建一个新数组,不改变原数组;return后面的判断结果,取布尔值,true就添入新的filter数组中,false则不加)。
语法:array.filter(function(currentValue,index,arr), thisValue)
例:
//筛选数组中大于5的数
let arr = [1,2,3,4,5,6,7,8];
let newArr = arr.filter(arr=>{
return arr > 5;
//箭头函数省略return写法:
//let newArr = arr.filter(arr => arr>5);
});
console.log(newArr);
<script>
const array = [1, 4, 9, 16];
const m = array.map(x => x + 2);
const f = array.filter(x => x + 2)
console.log(m); //[3,6,11,18]
console.log(f); //[1,4,9,16] (全为true)
</script>
<script>
const array = [1, 4, 9, 16];
const m = array.map(x => x > 2);
const f = array.filter(x => x > 2)
console.log(m); //[false, true, true, true]
console.log(f); //[4,9,16]
</script>
语法:
switch(expression) {
case n:
代码块
break;
case n:
代码块
break;
default:
默认代码块
}
expression:必须。指定计算的表达式。表达式只计算一次。表达式的值会与结构中的每个 case 的值做比较。如果存在匹配,则与该 case 关联的代码块会被执行。
//num=1时,打印出:正确
//num=3时,打印出:我不知道
var num = 3;
switch (num) {
case 0:
console.log('错误');
break;
case 1:
console.log('正确');
break;
case 2:
console.log('错误');
break;
default:
console.log('我不知道');
}
//若没有break,则从正确匹配的位置开始,依次向下执行。
//例如:num=1时,控制台打印出:正确 错误 我不知道
//num=0时,控制台打印出:错误 正确 错误 我不知道
var num = 1;
switch (num) {
case 0:
console.log('错误');
case 1:
console.log('正确');
case 2:
console.log('错误');
default:
console.log('我不知道');
}
<body>
<div id="app">
<button @click="booksTpye='全部'">全部</button>
<button @click="booksTpye='已借阅'">已借阅</button>
<button @click="booksTpye='未借阅'">未借阅</button>
<table>
<thead>
<tr>
<th>图书名称</th>
<th>图书作者</th>
<th>图书价格</th>
<th>图书出版社</th>
<th>图书状态</th>
<th>图书操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in fliterBooks" :key="index">
<td>{{item.name}}</td>
<td>{{item.auther}}</td>
<td>{{item.price}}</td>
<td>{{item.press}}</td>
<td>
<span v-if="item.borrow == true" style="color: red;" >已借阅</span>
<span v-else >未借阅</span>
</td>
<td>
<button v-if="item.borrow == true" @click="item.borrow=!item.borrow">归还</button>
<button v-else @click="item.borrow=!item.borrow">借阅</button>
</td>
</tr>
</tbody>
<p>总计{{booksData.length}}本书,当前可借阅{{canBorrow}}本书。</p>
</table>
</div>
<script src="/vue.js"></script>
<script>
new Vue({
el:'#app',
data(){
return{
booksData:[
{name:'JS程序设计',auther:'小明',price:'99',press:'机械工业出版社',borrow:false},
{name:'JS权威指南',auther:'小红',price:'78',press:'人民邮电出版社',borrow:false},
{name:'ES6入门',auther:'小黄',price:'67',press:'电子工业出版社',borrow:true},
{name:'JS设计模式',auther:'小刚',price:'49 ',press:'机械工业出版社',borrow:false},
],
booksTpye:'全部'
}
},
computed:{
canBorrow(){
return this.booksData.filter(item => !item.borrow).length
},
fliterBooks(){
switch(this.booksTpye){
case '已借阅' : return this.booksData.filter(item => item.borrow);
case '未借阅' : return this.booksData.filter(item => !item.borrow);
default:return this.booksData
}
}
}
})
</script>
</body>
//css样式:竖条分数变黄
<style>
.active {
color: orange;
}
</style>
<body>
<div id="app">
<div>
<span>搜索:</span>
<input type="text" v-model="min">
<span>~</span>
<input type="text" v-model="max">
</div>
<div>
//知识点1:单选按钮radio,怎么设置默认值,怎么实现只能选择一项。
<span>排名方式:</span>
//name的作用是只能选一个选框,v-model绑定同一个变量也可以只选一个选,就可以不用name了.
<input type="radio" v-model="rank" value="total">
<laber>总分</laber>
<input type="radio" v-model="rank" value="math">
<laber>数学</laber>
<input type="radio" v-model="rank" value="chinese">
<laber>语文</laber>
<input type="radio" v-model="rank" value="english">
<laber>英语</laber>
</div>
<table>
<thead>
<tr>
<th>排名</th>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
<th>总分</th>
</tr>
</thead>
<tbody>
//这后面是先筛选再排序,遍历排序后的数组,这样筛选和排序都有了
<tr v-for="(item,index) in sortScoresData" :key="index">
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td :class="{active:rank=='math'}">{{item.math}}</td>
<td :class="{active:rank=='chinese'}">{{item.chinese}}</td>
<td :class="{active:rank=='english'}">{{item.english}}</td>
<td :class="{active:rank=='total'}">{{oneTotal(item)}}</td>
</tr>
</tbody>
</table>
</div>
<script src="/vue.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
scoresData: [
{ name: '张三', math: 97, chinese: 89, english: 67 },
{ name: '李四', math: 67, chinese: 52, english: 98 },
{ name: '王五', math: 72, chinese: 87, english: 89 },
{ name: '赵钱', math: 92, chinese: 87, english: 59 },
{ name: '孙李', math: 47, chinese: 85, english: 92 },
],
rank: 'total',//纪录当前用户选择排名的方式
min: '0',
max: '300'
}
},
computed: {
//计算属性的传参使用:oneTotal上不能传,但是下面的函数可以。
oneTotal(){
return function(item){
return item.math+item.chinese+item.english
}
},
//计算属性得到筛选后的数组
//由于math在scoresData中实际上是字符串,因此能用item.math,而rank为变量,则不能用item.rank,访问变量要加中括号item[rank]
//由于,scoresData中无total数据,所以item中没有total属性,则不能使用item[this.rank]访问到,需要用if做判断。
filterScoresData(){
return this.scoresData.filter(item=>{
if(this.rank=='total'){
return (this.oneTotal(item))>=this.min&&(this.oneTotal(item))<=this.max;
}
return item[this.rank]>=this.min&&item[this.rank]<=this.max;
});
},
//计算属性得到排序后的数组
//知识点2:数组sort()方法
sortScoresData() {
switch (this.rank) {
case 'total': return this.filterScoresData.sort((a, b) => (this.oneTotal(b)) - (this.oneTotal(a)))
break;
case 'math': return this.filterScoresData.sort((a, b) => b.math - a.math)
break;
case 'chinese': return this.filterScoresData.sort((a, b) => b.chinese - a.chinese)
break;
case 'english': return this.filterScoresData.sort((a, b) => b.english - a.english)
break;
}
},
}
})
</script>
</body>
单选框:出现在多选一的页面设定中,提交到处理页的是value值。
注意:name值一定要相同,否则就不能多选一。当然提交到处理页的也还是value值。
//name相同才能实现单选按钮。
<input type="radio" name="question1" value="boy">男
<input type="radio" name="question1" value="girl">女
//如果用v-model绑定,则无需name参数。
<input type="radio" v-model="rank" value="total">
<input type="radio" v-model="rank" value="math">
在单个复选框上绑定 v-model 属性,可以通过 v-model 属性值的 true 或 false,来控制复选框的选中或未选中,同时,操作复选框的选中或未选中,也会同步更新 v-model 属性值的 true 或 false。
<body>
<div id="app">
<input type="checkbox" v-model="isChecked">
</div>
<script src="/vue.js"></script>
<script>
new Vue({
el:'#app',
data() {
return {
isChecked:true
}
},
})
</script>
</body>
在多个复选框上绑定同一个 v-model 属性,通过判断复选框自己的 value 值是否在 v-model 的数组里面,来控制复选框的选中或未选中。同时,操作复选框的选中或未选中,也会同步更新复选框的 value 值在数组中添加或删除。
<body>
<div id="app">
<input type="checkbox" value="eat" v-model="checkeds">吃饭
<input type="checkbox" value="sleep" v-model="checkeds">睡觉
<input type="checkbox" value="hit" v-model="checkeds">打豆豆
</div>
<script src="/vue.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
checkeds: ['sleep'],
}
},
})
</script>
</body>
在单选框上绑定 v-model 属性,通过判断单选框自己的 value 值是否和 v-model 的值相等,来控制单选框的选中或未选中。
<body>
<div id="app">
<input type="radio" value="男" v-model="gender">男
<input type="radio" value="女" v-model="gender">女
</div>
<script src="/vue.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
gender: '男',
}
},
})
</script>
</body>
在 select 身上绑定 v-model 属性,通过判断 option 的 value 值和 v-model 的值是否相等,来决定被选中的 option。
<body>
<div id="app">
<select v-model="city">
<option value="四川">四川</option>
<option value="上海">上海</option>
<option value="北京">北京</option>
<option value="云南">云南</option>
</select>
</div>
<script src="/vue.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
city: '北京'
}
},
})
</script>
</body>
sort()方法会改变原数组。语法:array.sort(sortfunction)
,若无参数sortfunction则按字母升序排列。字母倒序排列则用reserve()。
//例:a-b是从小到大排列,b-a是从大到小。
var num = [74, 35, 74, 95, 33, 56, 84, 32, 21, 34];
num.sort((a, b) => b - a);
console.log(num);
var obj = {};
obj.name = '张三';
var myName = 'name';
console.log(obj.myName); //undefined,访问不到对应的属性
console.log(obj[myName]); //张三
首先,this只有在函数function中才需要去判断它的指向。如果是在全局环境中,this永远指向全局对象。浏览器环境中,全局对象为“window对象”,Nodejs环境中,全局对象为“Global对象”。
//普通函数中的this,永远指向window对象。
function foo(){
console.log(this);
}
foo();
//对象方法中的this,指向调用该方法的对象
const student = {
name: 'zhangsan',
sayName: function () {
console.log(this);
}
};
const person = { name: 'lisi' };
person.sayName = student.sayName
person.sayName();
//这里的this指向调用调用sayName方法的对象person
//事件中的this,指向绑定该事件的元素
const father = document.getElementById('father');
father.onclick = function (event){
console.log(this);
}
//这里指向绑定onclick事件的元素father
//构造函数中的this,指向new调用时得到的函数对象
function Person() {
console.log(this);
}
const p = new Person(); //这里this指向p
const b = new Person(); //这里this指向b
箭头函数没有自己的this,因此在箭头函数中范围this时,实际访问的是父级(箭头函数创建时所在范围)的this。
const student = {
foo: function(){
return()=>{ //箭头函数的父极是foo
console.log(this);
}
}
}
const bar = student.foo();//调用,将函数foo的返回值赋值给bar
bar();//这里调用的是函数的返回值,也就是箭头函数