四，Vue过滤器
过滤器是指Vue.js支持在{{}}插值的尾部添加一个管道符“（|）”对数据进行过滤，经常用于格式化文本，比如字母的大写、货币的千位使用、逗号分隔等
示例
<!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> </head> <body> <div id="app"> {{ times | conversion("yyyy-MM-dd HH:mm:ss 星期w") | againChange}} </div> </body> <script src="../js/vue2.7.js"></script> <script> // 创建一个Vue实例 var app = new Vue({ el:"#app", // 绑定一个元素 data(){ return { times: 1690944730436, } }, // 2. 定义过滤器 filters: { //3.定义一个处理函数，参数value为要处理数据,format为传入参数 conversion: function (value, format) { //这个转换方法就不介绍了，看看就行，过滤器用法为主 var date = new Date(value); function addZero(date) { if (date < 10) { return "0" + date; } return date; } let getTime = { yyyy: date.getFullYear(), yy: date.getFullYear() % 100, MM: addZero(date.getMonth() + 1), M: date.getMonth() + 1, dd: addZero(date.getDate()), d: date.getDate(), HH: addZero(date.getHours()), H: date.getHours(), hh: addZero(date.getHours() % 12), h: date.getHours() % 12, mm: addZero(date.getMinutes()), m: date.getMinutes(), ss: addZero(date.getSeconds()), s: date.getSeconds(), w: (function () { let a = ["日", "一", "二", "三", "四", "五", "六"]; return a[date.getDay()]; })(), }; for (let i in getTime) { format = format.replace(i, getTime[i]); } return format; }, //4.再定义一个过滤器，给数据前加上"时间为："这几个字 againChange: function (value) { return "时间为：" + value; }, }, }) </script> </html>
五，vue中class样式的动态绑定
5.1，字符串写法
- 使用场景
- 样式的类型不确定
- 手动触发样式改变
- 注意
字符串使用的是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> </head> <style> .yangshi{ font-size: 50px; } .yanse{ color: aquamarine; } </style> <body> <div id="app"> <div :class="myclass">你好vue</div> </div> </body> <script src="../js/vue2.7.js"></script> <script> // 创建一个Vue实例 var app = new Vue({ el:"#app", // 绑定一个元素 data(){ return { myclass:'yangshi yanse', } }, }) </script> </html>
5.1，对象写法
- 使用场景
- 样式个数、类名确定，通过Boolean动态展示与否
- 对象写在内联样式
<!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> </head> <style> .yangshi{ font-size: 50px; } .yanse{ color: aquamarine; } </style> <body> <div id="app"> <div :class="{yangshi:isyangshi,yanse:isyanse}">你好</div> </div> </body> <script src="../js/vue2.7.js"></script> <script> // 创建一个Vue实例 var app = new Vue({ el:"#app", // 绑定一个元素 data(){ return { isyangshi:true, isyanse:true, } }, }) </script> </html>
5.1，数组写法
- 使用场景
- 需要绑定的样式个数不确定，类名也不确定
<!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> </head> <style> .yangshi{ font-size: 50px; } .yanse{ color: aquamarine; } </style> <body> <div id="app"> <div :class="myclassObject">你好</div> </div> </body> <script src="../js/vue2.7.js"></script> <script> // 创建一个Vue实例 var app = new Vue({ el:"#app", // 绑定一个元素 data(){ return { myclassObject:['yangshi','yanse'] } }, }) </script> </html>
六，完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .yangshi{ font-size: 50px; } .yanse{ color: aquamarine; } </style> <body> <div id="app"> {{ times | conversion("yyyy-MM-dd HH:mm:ss 星期w") | againChange}} <div :class="myclass">你好</div> <div :class="{yangshi:isyangshi,yanse:isyanse}">你好</div> <div :class="myclassObject">你好</div> <div v-html="showHtml"></div> <h1 v-if="isIf">isIf是真的,显示了,false的情况下此节点删除</h1> <h1 v-else>我是isIf为false时显示</h1> <h1 v-show="isShow">isShow是真的,显示了，false的情况下此节点display为none</h1> <button @click="fun1">点击1</button> <button @dblclick="fun2">点击2</button> <div> <img v-bind:src="img1url" width="300px" height="100px" alt=""> </div> <div> <form action=""> <!-- 双向数据绑定是表单元素进行绑定 --> <input type="text" name="personNmae" v-model="person.name"> <input type="text" name="age" v-model="person.age"> <select name="love" v-model="person.love"> <option value="eat">吃</option> <option value="drick">喝</option> </select> <input type="radio" v-model="person.sex" name="sex" value="1">男 <input type="radio" v-model="person.sex" name="sex" value="2">女 <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="fun3($event,stu.name)">修改</button></td> </tr> </table> </div> </form> </div> <div> <div @click="fun4"> 外层div <div @click.stop="fun4">里层div</div> </div> </div> <div> <a href="http://www.baidu.com" @click.prevent="fun5">百度</a> </div> <div> <div @click.once="fun6">一次事件</div> </div> <div> <!-- 13表示是输入enter，起的keycode值可以查询 --> <input type="text" @keyup.13="change"> </div> </div> </body> <script src="../js/vue2.7.js"></script> <script> // 创建一个Vue实例 var app = new Vue({ el:"#app", // 绑定一个元素 data(){ return { name:'小豪老放屁！！', isIf:true, isShow:true, img1url:'../img/banner1.jpg', person:{ name:'王导', age:18, love:'eat', sex:1, }, showHtml:'<h1>王导</h1>', shabi:["小豪","王导","光头"], shabi1:"小豪", studentArray:[ {name:"光头",age:"18"}, {name:"王导",age:"20"} ], times: 1690944730436, myclass:'yangshi yanse', isyangshi:true, isyanse:true, myclassObject:['yangshi','yanse'] } }, methods:{ // 声明了一个叫fun1的方法 fun1(){ // 怎么在方法中使用data对象的变量,需要使用this console.log("button1被点击了",this.name); this.isShow=false if(this.isIf){ this.isIf=false }else{ this.isIf=true } }, fun2(){ console.log("button2被双击了"); }, fun3(event,name){ console.log("事件对象",event); console.log(name); }, fun4(event){ console.log("111"); // elent.stopPropagation(); // 使用原生js阻止冒泡 }, fun5(event){ alert("111"); // elent.preventDefault(); // 使用原生js阻止默认行为 }, fun6(){ console.log("sss"); }, change(event){ console.log(event.key,event.keyCode); } }, // 2. 定义过滤器 filters: { //3.定义一个处理函数，参数value为要处理数据,format为传入参数 conversion: function (value, format) { //这个转换方法就不介绍了，看看就行，过滤器用法为主 var date = new Date(value); function addZero(date) { if (date < 10) { return "0" + date; } return date; } let getTime = { yyyy: date.getFullYear(), yy: date.getFullYear() % 100, MM: addZero(date.getMonth() + 1), M: date.getMonth() + 1, dd: addZero(date.getDate()), d: date.getDate(), HH: addZero(date.getHours()), H: date.getHours(), hh: addZero(date.getHours() % 12), h: date.getHours() % 12, mm: addZero(date.getMinutes()), m: date.getMinutes(), ss: addZero(date.getSeconds()), s: date.getSeconds(), w: (function () { let a = ["日", "一", "二", "三", "四", "五", "六"]; return a[date.getDay()]; })(), }; for (let i in getTime) { format = format.replace(i, getTime[i]); } return format; }, //4.再定义一个过滤器，给数据前加上"时间为："这几个字 againChange: function (value) { return "时间为：" + value; }, }, }) </script> </html>
最后
送大家一句话：穷且益坚，不坠青云之志
