Vuejs提高篇（一）

Vuejas提高篇事件处理指令条件渲染指令循环遍历指令综合案例(添加员工信息)事件处理指令我们可以用 v-on 指令绑定一个事件监听器，通过它调用我们 Vue 实例中定义的方法。v-on指令可以简写为：@条件渲染指令循环遍历指令综合案例(添加员工信息)...

牛哄哄的柯南

6059人浏览 · 2020-12-03 22:37:21

牛哄哄的柯南 · 2020-12-03 22:37:21 发布

Vuejs提高篇

事件处理指令
- 对一个数进行加减运算
条件渲染指令
循环遍历指令
- 遍历对象属性
- 遍历数组元素
综合案例(添加删除员工信息)

事件处理指令

我们可以用 v-on 指令绑定一个事件监听器，通过它调用我们 Vue 实例中定义的方法。
v-on指令可以简写为：@

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
		    <button v-on:click="pointme">点击我</button>
		    <!-- v-on指令的简写 -->
		    <button @click="pointyou">点击你</button>
		</div>
		
		
		<script>
		    let vm = new Vue({
		        el: '#app',
		        data: {
		
		        },
		        methods:{
		            pointme(){
		                alert('点击了我');
		            },
		            pointyou(){
		                alert('点击了你');
		            }
		        }
		    });
		</script>
	</body>
</html>

效果动图：
在这里插入图片描述

对一个数进行加减运算

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
		
		    <button v-on:click="add(1)">加</button>
		    <button @click="subtract(1)">减</button>
			<br/>
			num:{{num}}
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
		    let vm = new Vue({
		        el: '#app',
		        data: {
		            num:0
		        },
		        methods:{
		            add(value){
		                this.num += value;
		            },
		            subtract(value){
		                this.num -= value;
		            }
		        }
		    });
		</script>
	</body>
</html>

效果动图：
在这里插入图片描述

条件渲染指令

条件渲染指令，可以根据条件判断，来设置元素的显示与隐藏。

v-if指令

当v-if的值为false时，网页中将不会对此元素进行渲染。

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
		    <div v-if="isShow1">DOM元素的样式绑定1</div>
		    <div v-if="isShow2">DOM元素的样式绑定2</div>
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
		    let vm = new Vue({
		        el: '#app',
		        data: {
		            isShow1:false,
		            isShow2:true
		        }
		    });
		</script>
	</body>
</html>

效果截图：
在这里插入图片描述

从效果图可以发现 DOM元素的样式绑定1并没有显示出来，因为v-if=false时，网页中将不会对此元素进行渲染。

v-else指令和v-else-if指令

我们可以使用 v-else 指令来表示 v-if 的“else 块”，v-else 元素必须紧跟在 v-if 或者 v-else-if 元素的后面——否则它将不会被识别。而v-else-if则是充当 v-if 的“else-if 块”，可以链式地使用多次。
样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
		    <div v-if="type==1">A</div>
		    <div v-else-if="type==2">B</div>
		    <div v-else-if="type==3">C</div>
		    <div v-else>D</div>
			&nbsp;
			<div v-if="type2==1">AA</div>
			<div v-else-if="type2==2">BB</div>
			<div v-else-if="type2==3">CC</div>
			<div v-else>DD</div>
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
		    let vm = new Vue({
		        el: '#app',
		        data: {
		            type:3,
					type2:5
		        }
		    });
		</script>
	</body>
</html>

效果截图：
在这里插入图片描述

v-if指令和v-show指令

v-show也是根据条件展示元素的指令。带有 v-show 的元素始终会被渲染并保留在 DOM 中。 v-show 是简单地切换元素的 CSS 属性 display 。

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
		    <div v-if="isShow">这里是v-if</div>
		    <div v-show="isShow">这里是v-show</div>
			
			<div v-if="isShow1">这里是v-if1</div>
			<div v-show="isShow1">这里是v-show1</div>
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
		    let vm = new Vue({
		        el: '#app',
		        data: {
		            isShow:false,
					isShow1:true
		        }
		    });
		</script>
	</body>
</html>

效果截图：
在这里插入图片描述

通过上面的例子，我们可以发现两者的不同：
1. v-if是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
2. v-if是惰性的，只有当条件为true时才会渲染，如果条件为false则什么都不做。
3. v-if有很高的切换开销，适用于条件不太容易改变的时候。
4. v-show不管条件是true还是false都会进行渲染。并且只是简单地基于 CSS 进行切换。
5. v-show有很高的初始渲染开销，适用于非常频繁地切换。

循环遍历指令

vue.js 的循环渲染是依赖于 v-for 指令，它能够根据 vue 的实例里面的信息，循环遍历所需数据，然后渲染出相应的内容。它可以遍历数组类型以及对象类型的数据，js 里面的数组本身实质上也是对象，这里遍历数组和对象的时候，方式相似但又稍有不同。

遍历对象属性

value 是遍历得到的属性值，key 是遍历得到的属性名，index 是遍历次序，这里的 key、index 都是可选参数，如果不需要，这个指令其实可以写成 v-for=“value in user”。

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
		    <p v-for="(value,key,index) in user">{{index}}：{{key}} ：{{value}} </p>
		    <hr>
		    <p v-for="value in user">{{value}}</p>
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
		    let vm = new Vue({
		        el: '#app',
		        data: {
		            user:{
		                userId:999999,
		                userName:'牛哄哄的柯南',
		                userSex:'男'
		            }
		        }
		    });
		</script>
	</body>
</html>

效果截图：
在这里插入图片描述

遍历数组元素

value 是遍历得到的元素，index 是数组下标，这里的index 也是可选参数，如果不需要，这个指令其实可以写成 v-for=“value in userArr”。

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
		    <p v-for="(item,index) in userArr">
		        {{index}}--{{item.userId}}:{{item.userName}}:{{item.userSex}}
		        <button @click="operate(index)">操作</button>
		    </p>
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
		    let vm = new Vue({
		        el: '#app',
		        data: {
		            userArr: [{
		                userId: 1,
		                userName: '张三',
		                userSex: '男'
		            }, {
		                userId: 2,
		                userName: '李四',
		                userSex: '女'
		            }, {
		                userId: 3,
		                userName: '王五',
		                userSex: '男'
		            }]
		        },
		        methods:{
		            operate(index){
		                console.log(this.userArr[index]);
		            }
		        }
		    });
		</script>
	</body>
</html>

效果截图：
在这里插入图片描述

综合案例(添加删除员工信息)

需求效果图：
在这里插入图片描述
完整代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <style>
            #app{
                        width: 500px;
                    }
                    table{
                        width: 100%;
                        border-collapse: collapse;
                    }
                    table tr th,table tr td{
                        height: 35px;
						border : solid 1px #999;
                        text-align: center;
                    }
                    .clear-btn{
                        text-align: right;
                    }
                </style>
    </head>
    <body>
        <div id="app">
            <table>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(obj,index) in arr">
                    <td>{{obj.userId}}</td>
                    <td>{{obj.userName}}</td>
                    <td>{{obj.userAge}}</td>

                    <td><button  @click="del(index)" >删除</button></td>
                </tr>
                <tr >
                    <td colspan="4"> <button  @click="clear()" >清空</button></td>
                </tr>
            </table>
            <h3>添加:</h3>
            姓名：<input type="text" v-model="userName"><br>
            年龄：<input type="text"  v-model="userAge"><br>
            <button @click="add">添加</button>

        </div>

        <script>

            let vm = new Vue({
                el: '#app',
                data: {
                    arr: [{
                        userId: 1,
                        userName: '张三',
                        userAge: 20
                    }, {
                        userId: 2,
                        userName: '李四',
                        userAge: 21
                    }, {
                        userId: 3,
                        userName: '王五',
                        userAge: 22
                    }],
                    userName:'',
                    userAge:null,
                },
                methods:{
                    del(index){
                        //this Vue实例
                        this.arr.splice(index,1);
                    },
                    clear(){
                        this.arr = [];
                    },
                    add(){
                        //获取控件
                        let userName = this.userName;
                        let userAge = this.userAge;
                        let userId = (this.arr.length +1);
                        this.arr.push({
                            userId,
                            userName,
                            userAge
                        })
						this.userName='';  // 输入后清空
						this.userAge='';  // 输入后清空
						
                    }
                }
            });
        </script>

    </body>
</html>

添加效果：
在这里插入图片描述

删除清空效果：
在这里插入图片描述
看完如果对你有帮助，感谢点赞支持！
如果你是电脑端的话，看到右下角的 “一键三连” 了吗，没错点它[哈哈]

加油！

共同努力！

Keafmd

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...