-
vue中的常用指令
目录
v-if分支渲染
vue2/vue3强烈要求不能把v-if和v-for写在一个标签上,vue2v-if和v-for写在一个标签上不会报错，vue3如果将v-if和v-for写在一个标签上，运行时会报错，
原因：指令优先级
1.vue3 v-if优先级高于v-for,v-if后面循环变量是无法获取的
2.vue2 v-for的优先级高于v-if，先渲染所有的列表结构，然后在根据v-fi移除不要的，会造成性能上的浪费那么在vue3中怎样使用v-if和v-for呢，可以将v-for写在标签上进行循环遍历，内容再用v-if进行判断。
v-show实现条件式显示和隐藏
v-if和v-show的区别：
1.v-if控制页面dom节点的添加和移除，v-show控制某个标签的css样式
2.v-if可以实现多分支（注意v-if与v-else之间必须不能有其他标签否则无效），v-show只能显示/隐藏之间进行切换
3.如果涉及到一个元素频繁的显示和隐藏使用v-show
4.不希望页面有冗余的html结构，考虑使用v-ifv-if和v-show的使用
- "app"><div v-if="flag">Hello Vuediv><div><div><input type="text" v-model="score">div><div><h1 v-if="score>=90">Ah1><h1 v-else-if="score>=80">Bh1><h1 v-else-if="score>=70">Ch1><h1 v-else>Dh1>div><div v-show="score>80">显示div>div><ul><template v-for="(item,index) in stuList"><li v-if="item.sex=='m'">{{item.name}}li>template>ul>div><script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.37/vue.global.js">script><script>var app=Vue.createApp({data:function(){return{flag:true,score:0,stuList:[{name:"jack",sex:"m"},{name:"rose",sex:"f"},]}}});app.mount("#app");script>
v-on事件绑定
v-on实现某个元素的事件绑定
v-on:事件类型，一般包括鼠标事件、键盘事件以及其他事件。
v-on:简写@事件传参：
默认传参：默认传递的是当前事件的事件对象。
手动传参：可以传递指定的参数状态。
示例代码：
- <div id="app">
- <div>
- <button type="button" v-on:click="num++">点击{{num}}次button>
- <button type="button" v-on:click="onCount">点击{{num}}次button>
- div>
- <div>
- <a href="#" @click="onClick(item)" v-for="item in 10" style="margin-left: 10px;">{{item}}a><br>
- <a href="#" @click="onClick2(item,$event)" v-for="item in 10" style="margin-left: 10px;">{{item}}a>
- div>
- <div v-on:mousemove="onMousemove" style="height:100px;background: pink;margin-top: 20px;">div>
- <div @click="onClickA(-999)">
- <a href="http://www.baidu.com" @click.prevent.stop="onClickA(-99,$event)">百度a>
- div>
- <div @click.self="onClickA(-999)">
- <a href="http://www.baidu.com" @click.prevent="onClickA(-99,$event)">百度a>
- div>
- <form action="">
- <input type="text" @keyup.enter="onSubmit">
- <button type="submit" @click.prevent="onSubmit">提交button>
- form>
- div>
- <script>
- var app=Vue.createApp({
- data:function(){
- return{
- num:0
- }
- },
- //存放一些方法 methods中的方法 可以在模板中访问到
- methods: {
- onCount(e){
- console.log(e);
- //在方法中 访问状态 要加this
- this.num++;
- //在一个方法中访问其他方法，前面加this
- },
- onMousemove() {
- console.log("鼠标移到");
- },
- onClick(e){
- console.log(e);
- },
- onClick2(num,e){
- console.log(num,e);
- },
- onClickA(num,e){
- console.log(num);
- //e.preventDefault();
- },
- onSubmit(){
- alert("提交了");
- }
- },
- });
- app.mount("#app");
- script>
v-bind动态绑定
有时候属性也不是固定的，也是需要根据某些变量某些数据动态来决定的，那么就需要用到v-bind对属性进行动态的绑定。
v-bind 主要用于属性绑定，比方你的class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定。
动态绑定a标签的href属性
- <div id="app">
- {{age}}
- <input v-model="age" type="text" placeholder="请输入你的年龄" >
- <a :href="age>18?url1:url0">输入年龄点击有惊喜a>
- div>
- <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.37/vue.global.js">script>
- <script>
- var app=Vue.createApp({
- data:function(){
- return{
- age:0,
- url0:"https://www.4399.com",
- url1:"https://www.taobao.com",
- }
- }
- });
- app.mount("#app");
- script>
动态绑定样式或class属性
- <div id="app">
- <button @click="flag=!flag" type="button">{{flag?"关灯":"开灯"}}button>
- <div class="box" v-bind:style="{backgroundColor:flag?'red':'black'}">动态绑定stylediv>
- <div class="box" :class="{red:flag,black:!flag}">动态绑定classdiv>
- <div class="box" :class="[flag?'red':'black']">:class="[flag?'red':'black']"div>
- <div class="box" :class="[flag?'red':'black',{border:flag}]">div>
- div>
- <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.37/vue.global.js">script>
- <script>
- var app=Vue.createApp({
- data:function(){
- return{
- flag:true
- }
- }
- });
- app.mount("#app");
- script>
指令的基本使用，对数组中的内容实现添加、删除以及排序功能：
- <div id="app">
- <div>
- <label>姓名：<input type="text" name="" id="" v-model="stu.name">label><br>
- <label>分数：<input type="text" name="" id="" v-model="stu.score" @keyup.enter="onAdd">label>
- <div>
- <button @click="onAdd">添加button>
- <button @click="onSort">排序button>
- <button @click="onShuffle">打乱button>
- div>
- div>
- <div>
- <ul>
- <li v-for="(item,index) in stuList">
- {{item.name}}:{{item.score}}
- <a href="#" @click="onDel(index)">删除a>
- li>
- ul>
- div>
- div>
- <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.37/vue.global.js">script>
- <script>
- var app=Vue.createApp({
- data:function(){
- return{
- stu:{
- name:"",
- score:0
- },
- stuList:[
- {
- name:"张三",
- score:90
- },
- {
- name:"小米",
- score:70
- },
- {
- name:"小王",
- score:80
- },
- {
- name:"小张",
- score:76
- },
- ]
- }
- },
- methods: {
- onAdd() {
- if(this.stu.name.trim()==""){
- return;
- }
- //...this.stu复制一份
- //this.stuList.push({...this.stu});//unshift
- this.stuList.push({
- name:this.stu.name,
- score:this.stu.score,
- });//unshift在数组内容的前面添加内容
- //清空
- this.stu.name="";
- this.stu.score=0;
- },
- onDel(idx){
- this.stuList.splice(idx,1);
- },
- onSort(){
- //数组进行 从高到低降序排列
- //a b数组中相邻的两个元素，如果返回值是正数 a b 交换位置，否则不交换
- this.stuList.sort((a,b)=>b.score-a.score);
- },
- onShuffle(){
- //对数组进行打乱
- this.stuList.sort(()=>Math.random()-0.5);
- }
- },
- });
- app.mount("#app");
- script>
- 相关阅读:
Docker搭建RabbitMQ集群_开启MQTT插件后连接不上
Java线程状态转换
微生物学检验试剂——博迈伦
计算机毕业设计之java+ssm的摄影约拍系统的设计
MYSQL数据库-基本操作
Tomcat实现ThreadPoolExecutor和JDK线程池区别
【面试】说出你的三个优点和三个缺点
746. 使用最小花费爬楼梯
中科方得v3.1远程桌面出错unable to connect
center loss pytorch实现总结
- 原文地址：https://blog.csdn.net/Doulvme/article/details/126246930
