当前位置：网站首页>v-if、v-for、列表的过滤与排序、强制绑定class和style、收集表单信息
v-if、v-for、列表的过滤与排序、强制绑定class和style、收集表单信息
2022-07-22 02:05:00 【半夜删你代码·】
v-if
<body>
<div id="app">
<p v-if="isShow">表白成功</p>
<p v-else>表白失败</p>
<hr>
<p v-show="isShow">求婚成功</p>
<p v-show="!isShow">求婚失败</p>
<button @click="changeIsShow">切换</button>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
isShow:true
},
methods: {
changeIsShow(){
this.isShow = !this.isShow
}
},
})
</script>
</body>vif 和 vshow都是条件渲染有什么区别？
vif后面的条件如果为真，当前元素才会渲染，也就是说条件为假的元素内存中都不存在
vshow后面的条件无论是真还是假，都会进行渲染，也就是说条件为假的元素内存中仍然存在，只是使用css隐藏了
vif和vshow根据使用场景的不同，效率是不一样的
如果我们切换的频率很高，vshow比较合适，因为不需要重复的去渲染元素，内存也不需要重复的去创建销毁
如果我们切换的频率不高，vif比较合适，因为内存占用比较少，效率比较高
后期我们会使用组件标签，组件创建有生命周期，如果我们使用vif在组件标签身上
假设条件为假，这个组件是不会创建了，内存当中没有组件对象
如果使用的是vshow在组件标签身上，那么不管条件是真还是假，这个组件都会创建，生命周期都会执行对应的钩子
从输入url回车，到页面渲染完成经历了什么？
1、dns解析，本质是把域名解析为 ip:端口
2、tcp建立连接 三次握手
3、http请求发送请求报文
4、后台服务器返回响应报文
5、浏览器拿到响应报文后，解析渲染
html ---- domTree
css ---- cssTree
把生成的domTree和cssTree合并为renderTree 进行渲染
6、和后台断开连接 四次挥手
v-for
<body>
<div id="app">
<ul>
<!-- key是虚拟dom进行diffing算法对比的时候，所依赖的标识
这个标识能用唯一值就用唯一值，尽量别用下标
如果只是为了查，那么写index下标没问题
如果是增删改，那么写下标可能会出问题
最次也会导致效率低下 -->
<li v-for="(person,index) in persons" :key="person.id">
{
{person.id}} --- {
{person.username}} --- {
{person.age}}
</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:'#app',
data(){
return {
persons:[
{id:1,username:'zhaoliying',age:35},
{id:2,username:'yangmi',age:36},
{id:3,username:'dilireba',age:30}
]
}
}
})
</script>
</body>vue处理响应式数据
vue如何去监视数据变化而更新页面（点击按钮修改第一项）
1、修改数组当中对象的属性，发现页面可以改变
2、通过数组的下标直接修改数组当中的整个对象，发现页面改变不了
3、调用数组的方法直接修改数组当中的整个对象，发现页面也可以改变
原因：
修改数组当中对象的属性，都是可以修改的，因为对象的所有属性都添加了get和set方法（响应式数据），
data当中所有的对象的属性，都是响应式
通过下标直接修改数组整个对象，不可以展示到页面，但是数据确实改了，数组的下标没有get和set通过数组的方法去修改整个对象也是可以修改的，因为vue当中重写了数组的部分原生方法，额外添加了展示到页面的功能
对象数据和数组数据响应式的区别
<body>
<div id="app">
<ul>
<li v-for="(person, index) in persons" :key="person.id">
{
{person.id}} --- {
{person.username}} --- {
{person.age}}
</li>
</ul>
<button @click="update">点击修改第一个人的名字</button>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:"#app",
data(){
return {
persons:[
{id:1,username:'zhaoliying',age:35},
{id:2,username:'yangmi',age:36},
{id:3,username:'dilireba',age:30}
]
}
},
methods: {
update(){
// this.persons[0].username = 'yingbao'
// this.persons[0] = {id:1,username:'yingbao',age:35}
this.persons.splice(0,1,{id:1,username:'yingbao',age:35})
}
},
})
</script>
</body>vue在处理数据的时候响应式是按照以下规则来的
对于对象
当我们一旦实例化vm实例的时候，vue内部会做数据劫持，把
data当中所有的对象属性（包括深层次），都添加了getter和setter
让每个属性都是响应式的
因此第一项成功了
对于数组
数组的响应式是修改了7个方法，只要使用的是下面7个方法当中的、
那么一定响应式，其实本质就是给这些数组方法添加了修改页面的功能而已
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
所以第三种可以
列表的过滤
<body>
<div id="app">
<input type="text" v-model="keyword">
<ul>
<!-- 不推荐，效率低 -->
<!-- <li v-for="(person, index) in persons" :key="person.id" v-if="person.username.indexOf(keyword)!==-1">
{
{person.id}} --- {
{person.username}} --- {
{person.age}}
</li> -->
<li v-for="(person, index) in newPersons" :key="person.id">
{
{person.id}} --- {
{person.username}} --- {
{person.age}}
</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:"#app",
data(){
return {
persons:[
{id:1,username:'zhaoliying',age:35},
{id:2,username:'yangmi',age:36},
{id:3,username:'dilireba',age:30}
],
keyword:''
}
},
computed: {
newPersons(){
let {persons,keyword} = this
return persons.filter(item => item.username.indexOf(keyword) !== -1)
}
},
})
</script>
</body>vfor和vif能不能同时使用？ 答案是肯定的
vfor和vif同时使用的时候，谁的优先级高：答案是vfor
但是不推荐vfor和vif同时使用，因为vfor本身会出现很多个元素，每个元素身上都有一个指令v-if
vif指令都是需要进行解析的，指令进行解析的过程是很消耗性能的，这样效率就会很低下
原因是效率极低解决办法：
计算属性，我们通过计算属性把需要展示的数据，计算为一个新数组，展示的时候我们不和原数组拉关系
这样的话，vfor遍历直接遍历计算出来的新数组即可
列表的排序
<body>
<div id="app">
<input type="text" v-model="keyword">
<ul>
<!-- 不推荐，效率低 -->
<!-- <li v-for="(person, index) in persons" :key="person.id" v-if="person.username.indexOf(keyword)!==-1">
{
{person.id}} --- {
{person.username}} --- {
{person.age}}
</li> -->
<li v-for="(person, index) in newPersons" :key="person.id">
{
{person.id}} --- {
{person.username}} --- {
{person.age}}
</li>
</ul>
<!-- 事件的回调 可以是回调也可以是函数调用
当我们不加任何参数的时候，它可以写成回调
当我们需要加参数的时候，它可以写成函数调用,但是不能加this
-->
<button @click="changeFlag(0)">原样排序</button>
<button @click="sortFlag = 1">年龄升序</button>
<button @click="sortFlag = 2">年龄降序</button>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:"#app",
data(){
return {
persons:[
{id:1,username:'zhaoliying',age:35},
{id:2,username:'yangmi',age:36},
{id:3,username:'dilireba',age:30}
],
keyword:'',
sortFlag:0 //设计排序标志数据
}
},
computed: {
newPersons(){
let {persons,keyword,sortFlag} = this
let arr = persons.filter(item => item.username.indexOf(keyword) !== -1)
// if(sortFlag){
// if(sortFlag === 1){
// arr.sort((a,b) => {
// return a.age - b.age
// })
// }else{
// arr.sort((a,b) => {
// return b.age - a.age
// })
// }
// }
if (sortFlag) arr.sort((a,b) => sortFlag === 1? a.age - b.age : b.age - a.age)
return arr
}
},
methods: {
// 如果后期写函数，函数内部只有一行代码
// 可以省略函数
changeFlag(flag){
this.sortFlag = flag
}
},
})
</script>
</body>列表的过滤和排序
列表过滤：
1、收集用户输入的关键字 需要设计收集的数据 vmodel收集keyword
2、页面展示的不再是原数组，而是根据原数组和keyword计算出来的新数组，否则就会碰到vfor和vif同时使用
3、页面展示的数据替换为新数组
列表排序(过滤后排序)
1、要排序需要设计排序标识数据 sortFlag 0原样 1升序 2降序
2、添加点击事件，点击三个按钮我们只需要负责修改sortFlag数据
3、sortFlag的改变是要引起过滤的新数组进行改变，sortFlag也得加入到计算当中去
4、过滤完成之后，只需要根据sortFlag的值，进行排序过滤出来的数组即可
强制绑定class和style
强制绑定样式class和style
class动态绑定：
1、类名不确定 字符串形式
2、类名确定，但是不知道哪个生效 对象形式
3、类名有几个都生效 数组形式
style动态绑定
1、必须把原来的东西写在对象当中，样式名不变，样式值是动态的
2、样式名如果不合法，要变为小驼峰写法
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.classA{
font-size: 80px;
}
.classB{
color: hotpink;
}
.classC{
background-color: greenyellow;
}
.classD{
font-size: 30px;
}
</style>
</head>
<body>
<div id="app">
<!-- 强制绑定class -->
<!-- 1、我不知道这个元素应该是哪个类，是哪个类是后台给我返回来的 字符串用法-->
<p class="classD" :class="myClass" >我爱你赵丽颖</p>
<!-- 2、我知道哪些类在这个元素身上，但是我不知道哪个生效 对象写法-->
<p :class="{classA:isA,classB:isB}">我爱你赵丽颖</p>
<!-- 3、元素身上有多个类生效，多个类也是后台返回的 数组写法-->
<p :class="classArr">我爱你赵丽颖</p>
<!-- 强制绑定style -->
<!-- 样式属性我们知道，值是由后台返回来的 对象写法-->
<p :style="{fontSize,color:myColor}">我爱你赵丽颖</p>
<button @click="updateClass">点击改变样式</button>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:'#app',
data(){
return {
myClass:'classA',
isA:true,
isB:false,
classArr:['classA','classB','classC'],
fontSize:'100px',
myColor:'skyblue'
}
},
methods: {
updateClass(){
this.isA = !this.isA
this.isB = !this.isB
}
},
})
</script>
</body>事件的绑定相关
事件绑定方法
v-on 只是绑定事件的复杂写法
@ 只是简写
1、回调写法
回调不需要自己加括号，直接写函数名即可，函数在定义的时候第一个形参接收的就是事件对象
2、函数调用
函数调用是自己加括号调用，调用的时候，vue会自动在我们写的函数调用外层添加一个函数，这个函数才是真正的回调
这个函数默认是有一个形参叫$event,(不能更改)， 我们在写的函数调用如果需要把事件对象传递下去，那么就得传实参
$event,我们的函数定义就需要去接收这个参数，拿到事件对象去使用，如果不需要就不用传，函数内部也就拿不到事件对象。 如果我们传递参数不光要事件对象，还需要自己定义的参数，那么此时，需要在函数调用的时候，传递两个，一个是
$event,一个是自己的参数$event后期我们称为叫做默认参数，在原生dom事件当中只要见到$event,代表的就是事件对象
<body>
<div id="app">
<!-- 最原始的写法,而且不带参数 -->
<button v-on:click="test">test</button>
<!-- 把最原始的写法进行简写 -->
<button @click="test">test</button>
<!-- 默认我们写的回调传递了一个参数是事件对象
和下面这个写法是一样的，函数调用如果你也要拿到事件对象
因为外层给你自动添加一个函数，外层函数就变为回调函数，内层函数想使用
事件对象，需要把外层函数接收的事件对象，进行手动传递,$event只能出现在模板当中
后期我们把$event称为叫默认参数
-->
<button @click="test1($event)">test1</button>
<!-- 一旦写了函数调用,并且还要传递事件对象
全写应该是这个样子
写函数调用的时候别加this，加了this就报错，因为this指向改变了
function($event){
test1($event)
}
-->
<!-- 不但想传递事件对象还要传递自己额外的参数，那么就一起传,没有先后顺序，接收的时候注意 -->
<button @click="test2(10,$event)">test2</button>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:'#app',
data(){
return {
}
},
methods: {
test(event){
console.log(event.target.innerHTML);
},
test1(event){
console.log(event.target.innerHTML);
},
test2(num,event){
console.log(event.target.innerHTML,num);
}
},
})
</script>
</body>自动收集表单
自动收集表单数据v-model的应用
输入框数据 输入的数据会自动赋值给data的数据
单选框数据 选中的value值会自动付给data的数据
多选框数据 单个使用操作的是布尔值 多个使用操作的是value值
下拉菜单数据 选中的option的value值会自动赋值给data的数据
文本域数据 写上的文本会自动赋值给data的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 1、收集表单元素的数据，用的是v-model
2、一般默认情况v-model收集的是表单元素的value值
-->
<!-- 文本输入框和密码输入框，value值就是用户输入的数据 -->
用户名: <input type="text" placeholder="请输入用户名" v-model="userInfo.username"> <br>
密 码: <input type="password" placeholder="请输入密码" v-model="userInfo.password"><br>
性 别：
<!-- 单选输入框,默认是没有value值，value值必须自己写 -->
<label><input type="radio" name="sex" value="male" v-model="userInfo.gender">男</label>
<label><input type="radio" name="sex" value="female" v-model="userInfo.gender">女</label> <br>
爱 好：
<!-- 多选输入框分为成组使用和单个使用，现在这个爱好是属于成组使用
如果是成组使用，收集value值需要收集到一个数组当中，成组使用的时候value值也需要自己写 -->
<label><input type="checkbox" value="basketball" v-model="userInfo.favs"></label>
<label><input type="checkbox" value="football" v-model="userInfo.favs"></label>
<label><input type="checkbox" value="ping-pang" v-model="userInfo.favs"></label> <br>
城 市:
<!-- 下拉选择收集的数据是select要收集的，也就是说vmodel要写在select身上
但是select本省并没有value值，select收集的是选中的option的value值
option的value值写什么，要看你收集什么？
key：diffing算法当中对比虚拟dom所用的标识
-->
<select v-model="userInfo.cityId">
<option :value="city.id" v-for="(city, index) in cities" :key="city.id">
{
{city.name}}
</option>
</select> <br>
个人简介：
<!-- 文本域和文本输入框一样 -->
<textarea cols="30" rows="10" v-model="userInfo.desc"></textarea>
<br>
<!-- 如果多选框是单个使用的vmodel可以理解为其实是默认和checked绑定的 -->
<input type="checkbox" v-model="userInfo.isChecked">同意协议
<button @click="submit">提交</button>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:'#app',
data(){
return {
userInfo:{
username:'',
password:'',
gender:'',
favs:[],
cityId:2,
desc:'',
isChecked:false
},
cities:[
{id:1,name:'西安'},
{id:2,name:'北京'},
{id:3,name:'上海'},
]
}
},
methods: {
// submit(){
// axios({
// url:'./xxx',
// method:'post',
// data:this.userInfo
// })
// }
},
})
</script>
</body>
</html>边栏推荐
猜你喜欢
Event handling of lvgl
用R写一个迷宫小游戏
Industry analysis | logistics intercom
Worthington deoxyribonucleic acid and related research tools
halcon 使用txt文件格式显示点云
【C语言-程序编译】一行行代码究竟是怎么一步步到可执行程序的？
plt 画图并保存结果
How to use first-hand data visualization to win the favor of the boss and grasp the key points of data visualization
Equal protection compliance 2022 series | one center + triple protection, helping the construction of enterprise level protection to be more scientific
等保合规2022系列 | 今年，关于等保你该了解什么？
随机推荐
MySQL练习一数据库的知识
When configuring Eureka, the status displays the computer name instead of localhost and IPADDR, which is the local IP
Worthington cell separation optimization system (including cell separation guide)
还在问用什么来做接口测试？万能Jmeter打造性能测试数据平台
adb常见命令
ADB common commands
Redis cache penetration and avalanche
海康、大华、宇视拉实时流url规则总结
Do you know who the "open source queen" is-- Facing the threat of being fired, she still insisted on opening a famous project
Redis master-slave replication
Redis的conf配置
RuntimeWarning: Glyph 25152 missing from current font. font.set_text(s, 0.0, flags=flags)
Timed time test
2022-07-15 mysql/stonedb sub query verification exists process analysis
halcon 使用txt文件格式显示点云
Conf configuration of redis
如何对齐MathType公式和Word文字排版
Myocardial xanthase -- characteristics of myocardial xanthase of Clostridium crenatum Worthington
[information collection] write data from fofa API interface into txt and excel
Visual studio pit record