事件修饰符-阻止默认行为
有些标签是由默认行为的，比如a标签，有个默认的页面跳转。
- 使用原生js阻止默认行为
<a href="http://www.baidu.com" @click="fun5">百度</a>
fun5(event){ console.log(event.target); event.preventDefault(); // 使用原生js阻止默认行为 },
- 使用vue的事件修饰符阻止默认行为
<a href="http://www.baidu.com" @click.prevent="fun6">百度</a>
fun6(event){ console.log(event.target); },
一次事件
此事件只会执行一次，第二次点击无效
<div @click.once="fun7">一次事件</div>
键盘事件修饰符
键盘事件修饰符，主要筛选输入特定字符才触发。
<!-- 13表示是输入enter，起的keycode值可以查询 --> <input type="text" @keyup.13="change">
change(event){ console.log(event.key,event.keyCode); }
class样式的动态绑定
字符串写法
- 使用场景
- 样式的类型不确定
- 写法
<div :class="myclass">你好</div>
- 手动触发样式改变
- 注意
字符串使用的是vue实例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>vue2</title> <style> .class1{ font-size: 24px; } .class2{ color: red; } </style> </head> <body> <div id="app"> <div :class="myclass" > 你好 </div> </div> </body> <script src="./js/vue2.js"></script> <script> var app = new Vue({ el: '#app', // 用于指定当前vue实例为哪个容器使用，值为css选择器字符串 data() { return { myclass:'class1 class2' } }, }); </script> </html>
- 对象写法
- 使用场景
- 样式个数、类名确定，通过Boolean动态展示与否
- 对象写在内联样式
<div :class="{class1:class1,class2:class2}"> 对象-你好 </div>
.class1{ font-size: 24px; } .class2{ color: red; } .class3{ border: 1px blue solid; }
data() { return { class1:true, class2:false } },
- 对象写在data中
<div :class="classObject"> 对象2-你好 </div>
data() { return { classObject:{ class1:'class1', class2:'class2' } } },
数组写法
- 使用场景
- 需要绑定的样式个数不确定，类名也不确定
- 内联写法
<div :class="[class1,class2]">数组2-你好</div>
数组里加三元表达式
<div :class="[isActive?class1:'',class2]">数组2-你好</div>
写在data中
<div :class="classList"> 数组2-你好 </div>
data:{ classList:['class1', 'class2'] }
vue中列表过滤
<body> <div id="app"> <input type="text" v-model="searchInput"> <ul> <li v-for="(item,index) in searchList" :key="index"> {{item.name}}--{{item.price}} </li> </ul> </div> </body> <script src="./js/vue2.js"></script> <script> var app = new Vue({ el: '#app', data() { return { searchInput:'', goodsList:[ { name: '牛仔裤', price: '88元' }, { name: '运动裤', price: '67元' }, { name: '羽绒服', price: '128元' }, { name: '运动服', price: '100元' }, ] } }, computed:{ searchList(){ let list = this.goodsList.filter((item)=>{ return item.name.indexOf(this.searchInput)!==-1 }) return list; } } }); </script>
完整代码
<body> <div id="app"> {{person.name|riqi}} <div :class="yangshi">该放学了!</div> <div :class="{class1:class111,class2:class222}">该吃饭了</div> <div :class="hoow">该休息了!</div> <div v-html="mythml"></div> <h1 v-if="isif">isShow真的,我显示了,false的情况下此节点删除</h1> <h1 v-else="isif">isShow真的,我显示了</h1> <h1 v-Show="isShow">isShow真的,我显示了,false的情况下此节点display为none</h1> <button v-on:click="fun1">点击1</button> <button @click="fun1">点击2</button> <br> <img v-bind:src="imgs" width="300px"> <div> <form> <!-- 双向数据绑定是表单元素进行绑定 --> <input type="text" v-model="person.name"> <input type="text" v-model="person.age"> <select name="" id=""> <option value="eat">吃</option> <option value="drink">喝</option> </select> <input type="radio" v-model="person.sex" name="sex" value="1">男 <input type="radio" v-model="person.sex" name="sex" value="2">女 </form> </div> <div> <select v-model="shabi1" name="" id=""> <option v-for="(item, index) in shabi" >{{item}}</option> </select> </div> <div v-for="(attr,key) in person"> {{key}}-{{attr}} </div> <div> <table border="1"> <tr> <td>序号</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr> <tr v-for="(stu,index) in studentArraY"> <td>{{index+1}}</td> <td>{{stu.name}}</td> <td>{{stu.age}}</td> <td><button type="button" @click="fun6($event,stu.name)">修改</button></td> </tr> </table> </div> <div @click="fun3"> 父元素 <div @click.stop="fun3"><!--stop阻止冒泡--> 子元素 </div> </div> <!-- 阻止默认行为 --> <a href="http://www.baidu.com" @click.prevent="fun4">百度</a> <!-- 一次事件 --> <div @click.once="fun5">一次事件</div> <!-- 键盘事件 --> <input type="text" @keyup="change"> <br> {{person.shijian|shijian}} <br> {{person.shijian|hooo}} </div> </body> <script src="../js/vue2.7.js"></script> <script> //创建一个Vue实例 var app=new Vue({ el:"#app",//绑定一个元素 data(){ return{ isif:true, isShow:true, imgs:'../img/1.jpeg', person:{ name:'你好', age:20, sex:2, shijian:1690945229330 }, mythml:'<h1>abc</h1>', yangshi:"class1 class2", class111:true, class222:false, hoow:{ class1:"class1968", class2:"class222" }, studentArraY:[ {name:"光头",age:"18"}, {name:"导导",age:"20"} ], shabi:["豪🐖","导导","光头"], shabi1:"豪🐖", } }, methods:{ //声明了一个叫fun1的方法 fun1(){ //怎么在方法中使用data对象中的变量,需要使用this console.log("button1被点击了",this.name); if(this.isif){ this.isif=false }else{ this.isif=true } }, fun2(event,name){ console.log("事件对象",event) console.log(name,this.name) }, fun3(event){ console.log("父元素"); // event.stopPropagation(); // 使用原生js阻止冒泡 }, fun4(){ alert("sss") // event.preventDefault(); // 使用原生js阻止默认行为 }, fun5(){ console.log("执行一次"); }, change(event){ console.log(event.key,event.keyCode); }, fun6(event,name){ console.log("事件对象",event); console.log(name); } }, //过滤器 filters:{ shijian(value){ let time2 = new Date(value); var year=time2.getFullYear(); var month=time2.getMonth()+1; var date=time2.getDate(); var hour=time2.getHours(); var minute=time2.getMinutes(); var second=time2.getSeconds(); return year+"年"+month+"月"+date+"日 "+hour+":"+minute+":"+second }, hooo(value){ var date = new Date(value); var Y = date.getFullYear() + '-'; var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'; var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' '; var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':'; var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':'; var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds()); return Y + M + D + h + m + s } } }) </script> <style> .class1{ font-size: 40px; } .class2{ color: red; } </style>
样式
