本文详细介绍了Vue.js中的关键操作，包括条件渲染（v-if/v-show）、列表渲染（v-for）、事件处理（事件对象与修饰符）、表单数据处理及案例应用。讲解了如何利用Vue进行动态条件展示、列表循环、阻止事件冒泡、表单异步提交等，同时提供了学生信息管理和过滤搜索的实战例子，帮助开发者深入理解Vue.js的常用功能。
JavaWEB笔记16 Vue常用操作（下）+案例
文章目录
一.条件渲染：v-if指令和v-show指令：
条件渲染在实际网页的编辑和设计中比较常用，可以添加对应效果：在点击图层使其切换隐藏和显示，常用到的指令有两个，分别是v-if指令和v-show指令：
v-show:"false"隐藏，值为true是显示- v-if指令同样可以达到上面的效果：将上面的v-show换为v-if，其效果是相同的
注意：二者在效果上相同，但是开销不同：
v-show是类似于CSS中的display属性设置，而v-if是对于元素的销毁和重建，因此对于切换频繁的操作尽量选择v-show
v-if和v-else组合使用：
v-else后面不需要带任何东西，只要v-if后面为false自动执行v-else
因此将二者结合常可以用来切换显示
v-if，v-else-if和v-else：
可以针对多种不同的情况进行处理，即在标签内部可以使用判断选择逻辑
二.v-for循环指令进行列表渲染：
v-for指令在Vue中最常用的用法就是针对数组对象进行遍历和展示，对于数组arr[]使用v-for="(elem,index) in arr"就会循环展示对应的元素和索引，注意元素和索引的参数位置顺序不能改变，并且推荐绑定一个唯一值：v-for="(elem,index) in arr":key="index"，唯一值为了给Vue
遍历JSON对象：
v-for="(value,key,index) in jsonObj" 的形式 （值，键，索引） 进行遍历，即：数组中放json，即JSONarray[{},{}]的遍历：v-for="(elem,index) in jsonarr"，在标签内部取json内容时：ele.键名进行访问
三.Vue中获取事件对象：
Vue中获取事件对象要加$event，如在show方法中：show($event)，即在标签对象是show($event)所在的标签中调用该对象执行方法，也就是在内联中处理该对象
四.Vue中的事件修饰：
1.Vue中的事件修饰：
Vue中对于事件中的嵌套，我们并不想有这样的体验，只想要触发某一单一指定行为，因为内部标签在外部中，点击内部还可能触发外部活动，因此，阻止冒泡的方法有两种：
- 1）阻止事件发生：
在对应方法中加入.stopPropagation()可以阻止冒牌，该方法在调用时可以不用以$event出现，即：不用考虑冒泡 - 2）事件修饰符：Vue简单方法：
假设标签中绑定的是对应的点击事件
在@click事件后面加上.stop，即：@click.stop="方法($event)" - 3）对于阻止默认事件的发生：
如：a标签中href阻止跳页面，除了给值为0，void，设#外还有：Vue中方法：.preventDefault()就可以阻止默认跳转事件 - 4）想要AJAX异步提交，阻止表单的默认提交：
也可以使用.preventDefault()来阻止表单提交 - 5）上面两种都可以在Vue中使用事件修饰符进行默认事件的阻止：
在例如@click事件后加上修饰符.prevent进行阻止 - 6）事件执行一次：
.once修饰符：事件在刷新页面之前只会执行一次
还有不常用的几种:
.self
.passive
.capture
- 7）事件修饰符的并用：
使用连缀：@click.stop.prevent=""
2.Vue中的按键事件修饰符：
Vue中的按键修饰符的作用是让浏览器知道用户按了哪些键，可以结合触发浏览器快捷键：
键盘事件：
@keypress按下松开@keydown按下@keyup松开
在JS原生中可以使用.keyCode进行执行，如：添加回车执行，也就是回车触发：e.keyCode===13
Vue中对于按键有事件修饰符：
可以@keyup.enter="方法" 即：松开enter键进行操作
对于常用的键在Vue中都有别名，但是在其他按键的处理上则可以采用键码的形式：即上面的语句等于@keyup.13="方法"
组合键：
将两个键的键值进行连缀，如：alt+enter: @keyup.alt.13="方法"
3.Vue中的鼠标事件修饰符：
Vue中的鼠标事件有：@mousedown按下等事件，可以给浏览器一定的鼠标信号，如：滚轮执行等；鼠标事件的修饰符有：
.left按左键.right按右键.middle按中间滚轮
六.收集表单数据：
- Vue中的表单异步提交：
@submit.prevent=""，可以使用v-model一层一层进行绑定；如果要默认选中，就给表单项的v-model绑定值写上就行 - 表单中的多选项初始化data给空数组[]，想默认选就填对应值就行
- 绑定好数据之后将data中全部的数据处理成Json对象：对应键值起名相同
- 转成Json字符串：
Jsonstr = JSON.stringif(jsonobj);，结合console.log(Jsonstr)可以进行显示 - 直接收集到json防止字符串二次封装：直接在data中设计一个json，绑定的时候绑：json.name等
- 收集表单信息时的事件修饰符：收集表单信息时去掉空格：除了
.trim()外还可以在v-model上.trim - 收集表单中输入数字默认字符串，将其转成数据除了对应*1之外还可以加修饰符
.number
案例：关于循环显示的案例：
知识点：
- jsonArr的删除：
jsonArr.splice(index,1)括号中的两个参数是：删除开始的地方和删除几个元素 - 删除函数中可以加上弹框：alert(confirm(弹框信息))
- 数组更新检测：vue会对于部分方法的变更进行监听，直接赋值不会被系统检测，因此在更新时依旧使用
splice：jsonArr.splice(index,1,jsonOBJ)，三个参数是：索引，从索引开始改变的个数，替换的值 - 或者使用传统的等号赋值之后，使用两次
reverse()来触发视图更新 - 等号赋值时数据实际上已经发生了变化，两个倒序只是为了触发视图更新
（代码略）
案例：学生信息展示的案例：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>学生信息</title>
<style type="text/css">
tr{
text-align: center;
}
</style>
<!-- 引入vue.js 库文件 -->
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box" align="center">
<h1>添加学生</h1>
姓名：<input type="text" value="" id="nametop" v-model="name"/>
年龄：<input type="text" name="" value="" id="agetop" v-model="age" />
<button type="button" @click="addObj()">添加</button>
<br>
<br>
<br>
<table border="1" cellspacing="0" cellpadding="0" width="50%">
<caption>
<h2>学生信息表</h2>
</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
<tr v-for="(ele,index) in jsonArr" :key="index">
<td>{{index+1}}</td>
<td>{{ele.name}}<a href="#" style="margin-left:20px;" @click="changeNAME(index)">修改</a></td>
<td>{{ele.age}}<a href="#" style="margin-left:20px;" @click="changeAGE(index)">修改</a></td>
<td><a href="#" @click="delJson(index)">删除</a></td>
</tr>
<tr align="center">
<td colspan="4" v-if="flag" @click="delOBJ()"><button>全部删除</button></td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
name:'',
age:'',
jsonArr: [],
flag: false
},
methods:{
addObj(){
var Regname = /^[\u4e00-\u9fa5]{2,6}$/;
var Regage = /(^[1-9][0-9]?$)|^100$/ ;
if(!this.name||!this.age){
//进来了
alert("用户名或年龄不能为空！")
return;
}
else if(!Regname.test(this.name)){
alert("请输入正确的姓名");
this.name='';
}
else if(!Regage.test(this.age)){
alert("请输入正确的年龄");
this.age='';
}
else {
//alert("添加");
var name = this.name;
var age = this.age;
// if (!name || !age) {
// //进来了
// alert("用户名或年龄不能为空！")
// return;
// }
//var json={"name":name,"age":age};
//console.log(json)
//es6语法:json对象中，键和值的名字一样，就可以简写
var json2 = {name, age};
//console.log(json2);
//unshift() 向数组的开头添加一个或更多元素，并返回新的长度。
this.jsonArr.push(json2);
this.name = '';
this.age = '';
this.flag = true;
}
},
delOBJ(){
var f = confirm("是否要删除全部学生信息?");
if(f){
this.flag=false;
this.jsonArr=[];
this.jsonArr.reverse().reverse();
}
},
delJson(index){
var f = confirm("是否要删除此条学生信息?");
if(f) {
this.jsonArr.splice(index, 1);
}
},
changeNAME(index){
var f = confirm("是否要进行修改?");
if(f) {
var value = prompt("请输入新的姓名:", "");
var Regname = /^[\u4e00-\u9fa5]{2,6}$/;
while (!Regname.test(value)){
value = prompt("修改姓名格式错误! 请输入正确的姓名:","");
}
this.jsonArr[index].name = value;
this.jsonArr.reverse().reverse();
}
},
changeAGE(index){
var f = confirm("是否要进行修改?");
if(f){
var value = prompt("修改年龄格式错误! 请输入新的年龄:","");
var Regage = /(^[1-9][0-9]?$)|^100$/ ;
while(!Regage.test(value)){
value = prompt("请输入正确的年龄:","");
}
this.jsonArr[index].age = value;
this.jsonArr.reverse().reverse();
}
}
}
})
</script>
</html>
效果：
初始界面：
添加信息合法且成功时：
对于已添加的学生信息选择修改时：
确认修改并弹出修改框：
对于已经成功添加的学生信息进行删除时：
点击学生信息全部删除时：
案例.过滤搜索案例：
对于人员信息实现三种排序
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 引入vue.js 库文件 -->
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box" align="center">
<input v-model="content" type="text" name="" id="" value="" placeholder="请输入名字" />
<ul style="list-style: none;padding: 0;margin: 0;">
<!-- <li v-if="ele.name.indexOf(content)>-1" v-for="(ele,index) of jsonArray" :key="index">
序号：{{index}}--姓名：{{ele.name}}--年龄：{{ele.age}}---性别：{{ele.sex}}
</li> -->
<li v-for="(ele,index) in newArr" :key="index">
序号：{{index}}--姓名：{{ele.name}}--年龄：{{ele.age}}---性别：{{ele.sex}}
</li>
</ul>
<button type="button" @click="mySort(1)">年龄升序</button>
<button type="button" @click="mySort(2)">年龄降序</button>
<button type="button" @click="mySort(3)">默认顺序</button>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#box',
data: {
content: '',
jsonArray: [{
'index':0,
'name': 'zhangsan',
'age': 34,
'sex': '男'
}, {
'index':1,
'name': 'lisi',
'age': 14,
'sex': '女'
}, {
'index':2,
'name': 'wangwu',
'age': 25,
'sex': '男'
}, {
'index':3,
'name': 'zhaoliu',
'age': 65,
'sex': '女'
}]
},
//计算属性
computed:{
//通过用户输入框中输入的内容，从jsonArray中过滤出来，放到一个新数组中，遍历新数组。
newArr:function(){
//z
var text=this.content;
/* var arr=this.jsonArray.filter(function(ele){
//这个回调函数里面的this代表的window对象。
if(ele.name.indexOf(text)!=-1){
return true;
}else{
return false;
}
}) */
//es6 的箭头函数。
var arr=this.jsonArray.filter(ele=>{
//箭头函数改变了this的指向，指向的是vue对象。
if(ele.name.indexOf(this.content)!=-1){
return true;
}
else if(ele.sex.indexOf(this.content)!=-1){
return true;
}
else{
return false;
}
//return ele.name.indexOf(this.content)!=-1;
})
/*var arr=this.jsonArray.filter(ele=>{
//箭头函数改变了this的指向，指向的是vue对象。
if(ele.name.indexOf(this.content)!=-1){
return true;
}
else if(ele.sex.indexOf(this.content)!=-1){
alert('true');
return true;
}
else if(ele.age.indexOf(this.content)!=-1){
return true;
}
else{
return false;
}
})*/
return arr ;
}
},
methods:{
mySort(num){
if(num==1){
//按照年龄升序排列
this.jsonArray.sort(function(a,b){
return a.age-b.age;
})
this.jsonArray.sort((a,b)=>a.age-b.age)
}else if(num==2){
//按照年龄降序序排列
this.jsonArray.sort(function(a,b){
return b.age-a.age;
})
}else{
//默认顺序，留为作业
this.jsonArray.sort(function(a,b){
return a.index-b.index;
})
}
}
}
})
</script>
</html>
效果：
初始界面：
点击”年龄升序“之后的界面：
点击”年龄降序“之后的界面：
点击”默认顺序“之后的界面：
过滤搜索示范：
扫一扫
614
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
