标签：auto class tle return initial ini turn href 默认
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <div id="app"> 11 {{Date()|dateFrm}} 12 </div> 13 </body> 14 <script src="vue2.4.4.js"></script> 15 <script> 16 new Vue({ 17 el:"#app", 18 data:{}, 19 methods:{}, 20 mounted:{}, 21 filters:{ 22 // 过滤器中方法的第一个参数第一个参数是：当前调用过滤器的对象数据 23 dateFrm:function(time){ 24 // return "2017-11-16"; 25 console.log(time); 26 27 } 28 } 29 }); 30 </script> 31 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 #app { 11 width: 600px; 12 margin: 10px auto; 13 } 14 15 .tb { 16 border-collapse: collapse; 17 width: 100%; 18 } 19 20 .tb th { 21 background-color: #0094ff; 22 color: white; 23 } 24 25 .tb td, 26 .tb th { 27 padding: 5px; 28 border: 1px solid black; 29 text-align: center; 30 } 31 32 .add { 33 padding: 5px; 34 border: 1px solid black; 35 margin-bottom: 10px; 36 } 37 </style> 38 </head> 39 40 <body> 41 <div id="app"> 42 <div class="add"> 43 编号: <input id="id" v-color="color" v-focus="focus" type="text" v-model="id">品牌名称: <input v-model="name" type="text"> 44 <button @click="add">添加</button> 45 </div> 46 <div class="add">品牌名称：<input type="text"></div> 47 <div> 48 <table class="tb"> 49 <tr> 50 <th>编号</th> 51 <th>品牌名称</th> 52 <th>创立时间</th> 53 <th>操作</th> 54 </tr> 55 <tr v-if="list.length <= 0"> 56 <td colspan="4">没有品牌数据</td> 57 </tr> 58 <!--加入: key="index" 时候必须把所有参数写完整 --> 59 <tr v-for="(item,key,index) in list" :key="index"> 60 <td>{{item.id}}</td> 61 <td>{{item.name}}</td> 62 <td>{{item.ctime | dateFrm("/") |addNoon}}</td> 63 <!-- 使用vue来注册事件时，我们在dom元素中是看不到的 --> 64 <td><a href="javascript:void(0)" @click="del(item.id)">删除</a></td> 65 </tr> 66 </table> 67 </div> 68 69 </div> 70 </body> 71 72 </html> 73 <script src="vue2.4.4.js"></script> 74 <script> 75 // 先将自定义指令定义好 76 // directive有两个参数 77 //参数一： 自定义指令 v-focus 78 //参数二： 对象，对象中可以添加很多方法 79 // 添加一个inserted方法:而这个方法中又有两个参数： 80 //参数一:el 当前使用自定义指令的对象 81 //参数二：obj 是指它(v-color="color" )后面设置的表达式 82 //{expression:"color",value:"red",} 83 Vue.directive("focus", { 84 inserted: function (el, obj) { 85 // console.log(el); 86 el.focus(); 87 } 88 }); 89 Vue.directive("color", { 90 inserted: function (el, obj) { 91 // obj.style.color = "red"; 92 obj.style.color = obj.value;//???????????? 93 console.log(obj.value); 94 } 95 }); 96 97 var vm = new Vue({ 98 el: "#app", 99 data: { 100 color: "green", 101 id: 0, 102 name: ‘‘, 103 list: [ 104 { "id": 1, "name": "itcast", "ctime": Date() }, 105 { "id": 2, "name": "黑马", "ctime": Date() } 106 ] 107 }, 108 // mounted(){ 109 // this.getFocus() 110 // }, 111 methods: { 112 add: function () { 113 //将id和namepush到list数组中 114 this.list.push({ "id": this.id, "name": this.name, "ctime": Date() }); 115 }, 116 del: function (id) { 117 118 // 根据id得到下标 119 // 默认去遍历list集合，将集合中的每个元素传入到function的item里， 120 var index = this.list.findIndex(function (item) { 121 //根据item中的id属性来判断这个item是否是上面id中 122 //对应的数据，如果是返回一个true ,否返回false,继续下面的一条数据的遍历，以此类推 123 return item.id == id; //如果返回true，那么findIndex方法会将这个item对应的id返回到外面接受 124 }); 125 // 根据下标在list集合中将对应的数据删除 126 // splice(开始删除的下标，删除的长度) 127 this.list.splice(index, 1); 128 } 129 130 }, 131 filters: { 132 // 私有过滤器:过滤器中方法的第一个参数第一个参数是：当前调用过滤器的对象数据 133 dateFrm: function (time,spliceStr) { 134 // return "2017-11-16"; 135 var date = new Date(time); 136 //得到年 137 var year = date.getFullYear(); 138 // 得到月 139 var month = date.getMonth() + 1; 140 // 得到日 141 var day = date.getDate(); 142 return year+spliceStr+month+spliceStr+day; 143 }, 144 addNoon:function(time) { 145 return time+"下午"; 146 } 147 } 148 }); 149 150 </script>
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 #app { 11 width: 600px; 12 margin: 10px auto; 13 } 14 15 .tb { 16 border-collapse: collapse; 17 width: 100%; 18 } 19 20 .tb th { 21 background-color: #0094ff; 22 color: white; 23 } 24 25 .tb td, 26 .tb th { 27 padding: 5px; 28 border: 1px solid black; 29 text-align: center; 30 } 31 32 .add { 33 padding: 5px; 34 border: 1px solid black; 35 margin-bottom: 10px; 36 } 37 </style> 38 </head> 39 40 <body> 41 <div id="app"> 42 <div class="add"> 43 编号: <input id="id" v-color="color" v-focus="focus" type="text" v-model="id">品牌名称: <input v-model="name" type="text"> 44 <button @click="add">添加</button> 45 </div> 46 <div class="add">品牌名称：<input type="text"></div> 47 <div> 48 <table class="tb"> 49 <tr> 50 <th>编号</th> 51 <th>品牌名称</th> 52 <th>创立时间</th> 53 <th>操作</th> 54 </tr> 55 <tr v-if="list.length <= 0"> 56 <td colspan="4">没有品牌数据</td> 57 </tr> 58 <!--加入: key="index" 时候必须把所有参数写完整 --> 59 <tr v-for="(item,key,index) in list" :key="index"> 60 <td>{{item.id}}</td> 61 <td>{{item.name}}</td> 62 <td>{{item.ctime | dateFrm("/") |addNoon}}</td> 63 <!-- 使用vue来注册事件时，我们在dom元素中是看不到的 --> 64 <td><a href="javascript:void(0)" @click="del(item.id)">删除</a></td> 65 </tr> 66 </table> 67 </div> 68 69 </div> 70 </body> 71 72 </html> 73 <script src="vue2.4.4.js"></script> 74 <script> 75 // 使用全局过滤器（公有过滤器） 76 Vue.filter("dateFrm", function (time,spliceStr) { 77 // return "2017-11-16"; 78 var date = new Date(time); 79 //得到年 80 var year = date.getFullYear(); 81 // 得到月 82 var month = date.getMonth() + 1; 83 // 得到日 84 var day = date.getDate(); 85 return year + spliceStr + month + spliceStr + day; 86 }); 87 88 89 // 先将自定义指令定义好 90 // directive有两个参数 91 //参数一： 自定义指令 v-focus 92 //参数二： 对象，对象中可以添加很多方法 93 // 添加一个inserted方法:而这个方法中又有两个参数： 94 //参数一:el 当前使用自定义指令的对象 95 //参数二：obj 是指它(v-color="color" )后面设置的表达式 96 //{expression:"color",value:"red",} 97 Vue.directive("focus", { 98 inserted: function (el, obj) { 99 // console.log(el); 100 el.focus(); 101 } 102 }); 103 Vue.directive("color", { 104 inserted: function (el, obj) { 105 // obj.style.color = "red"; 106 obj.style.color = obj.value;//???????????? 107 console.log(obj.value); 108 } 109 }); 110 111 var vm = new Vue({ 112 el: "#app", 113 data: { 114 color: "green", 115 id: 0, 116 name: ‘‘, 117 list: [ 118 { "id": 1, "name": "itcast", "ctime": Date() }, 119 { "id": 2, "name": "黑马", "ctime": Date() } 120 ] 121 }, 122 // mounted(){ 123 // this.getFocus() 124 // }, 125 methods: { 126 add: function () { 127 //将id和namepush到list数组中 128 this.list.push({ "id": this.id, "name": this.name, "ctime": Date() }); 129 }, 130 del: function (id) { 131 132 // 根据id得到下标 133 // 默认去遍历list集合，将集合中的每个元素传入到function的item里， 134 var index = this.list.findIndex(function (item) { 135 //根据item中的id属性来判断这个item是否是上面id中 136 //对应的数据，如果是返回一个true ,否返回false,继续下面的一条数据的遍历，以此类推 137 return item.id == id; //如果返回true，那么findIndex方法会将这个item对应的id返回到外面接受 138 }); 139 // 根据下标在list集合中将对应的数据删除 140 // splice(开始删除的下标，删除的长度) 141 this.list.splice(index, 1); 142 } 143 144 } 145 }); 146 147 </script>
标签：auto class tle return initial ini turn href 默认
原文地址：http://www.cnblogs.com/mrszhou/p/7858994.html
