nbsp otto als getdate 名称 ava -s click 默认
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>Document</title>
- </head>
- <body>
- <div id="app">
- {{Date()|dateFrm}}
- </div>
- </body>
- <script src="vue2.4.4.js"></script>
- <script>
- new Vue({
- el:"#app",
- data:{},
- methods:{},
- mounted:{},
- filters:{
- // 过滤器中方法的第一个参数第一个参数是:当前调用过滤器的对象数据
- dateFrm:function(time){
- // return "2017-11-16";
- console.log(time);
- }
- }
- });
- </script>
- </html>
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>
- Document
- </title>
- <style>
- #app { width: 600px; margin: 10px auto; } .tb { border-collapse: collapse;
- width: 100%; } .tb th { background-color: #0094ff; color: white; } .tb
- td, .tb th { padding: 5px; border: 1px solid black; text-align: center;
- } .add { padding: 5px; border: 1px solid black; margin-bottom: 10px; }
- </style>
- </head>
- <body>
- <div id="app">
- <div class="add">
- 编号:
- <input id="id" v-color="color" v-focus="focus" type="text" v-model="id">
- 品牌名称:
- <input v-model="name" type="text">
- <button @click="add">
- 添加
- </button>
- </div>
- <div class="add">
- 品牌名称:
- <input type="text">
- </div>
- <div>
- <table class="tb">
- <tr>
- <th>
- 编号
- </th>
- <th>
- 品牌名称
- </th>
- <th>
- 创立时间
- </th>
- <th>
- 操作
- </th>
- </tr>
- <tr v-if="list.length <= 0">
- <td colspan="4">
- 没有品牌数据
- </td>
- </tr>
- <!--加入: key="index" 时候必须把所有参数写完整 -->
- <tr v-for="(item,key,index) in list" :key="index">
- <td>
- {{item.id}}
- </td>
- <td>
- {{item.name}}
- </td>
- <td>
- {{item.ctime | dateFrm("/") |addNoon}}
- </td>
- <!-- 使用vue来注册事件时,我们在dom元素中是看不到的 -->
- <td>
- <a href="javascript:void(0)" @click="del(item.id)">
- 删除
- </a>
- </td>
- </tr>
- </table>
- </div>
- </div>
- </body>
- </html>
- <script src="vue2.4.4.js">
- </script>
- <script>
- // 先将自定义指令定义好
- // directive有两个参数
- //参数一: 自定义指令 v-focus
- //参数二: 对象,对象中可以添加很多方法
- // 添加一个inserted方法:而这个方法中又有两个参数:
- //参数一:el 当前使用自定义指令的对象
- //参数二:obj 是指它(v-color="color" )后面设置的表达式
- //{expression:"color",value:"red",}
- Vue.directive("focus", {
- inserted: function(el, obj) {
- // console.log(el);
- el.focus();
- }
- });
- Vue.directive("color", {
- inserted: function(el, obj) {
- // obj.style.color = "red";
- obj.style.color = obj.value; //????????????
- console.log(obj.value);
- }
- });
- var vm = new Vue({
- el: "#app",
- data: {
- color: "green",
- id: 0,
- name: ‘‘,
- list: [{
- "id": 1,
- "name": "itcast",
- "ctime": Date()
- },
- {
- "id": 2,
- "name": "黑马",
- "ctime": Date()
- }]
- },
- // mounted(){
- // this.getFocus()
- // },
- methods: {
- add: function() {
- //将id和namepush到list数组中
- this.list.push({
- "id": this.id,
- "name": this.name,
- "ctime": Date()
- });
- },
- del: function(id) {
- // 根据id得到下标
- // 默认去遍历list集合,将集合中的每个元素传入到function的item里,
- var index = this.list.findIndex(function(item) {
- //根据item中的id属性来判断这个item是否是上面id中
- //对应的数据,如果是返回一个true ,否返回false,继续下面的一条数据的遍历,以此类推
- return item.id == id; //如果返回true,那么findIndex方法会将这个item对应的id返回到外面接受
- });
- // 根据下标在list集合中将对应的数据删除
- // splice(开始删除的下标,删除的长度)
- this.list.splice(index, 1);
- }
- },
- filters: {
- // 私有过滤器:过滤器中方法的第一个参数第一个参数是:当前调用过滤器的对象数据
- dateFrm: function(time, spliceStr) {
- // return "2017-11-16";
- var date = new Date(time);
- //得到年
- var year = date.getFullYear();
- // 得到月
- var month = date.getMonth() + 1;
- // 得到日
- var day = date.getDate();
- return year + spliceStr + month + spliceStr + day;
- },
- addNoon: function(time) {
- return time + "下午";
- }
- }
- });
- </script>
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>
- Document
- </title>
- <style>
- #app { width: 600px; margin: 10px auto; } .tb { border-collapse: collapse;
- width: 100%; } .tb th { background-color: #0094ff; color: white; } .tb
- td, .tb th { padding: 5px; border: 1px solid black; text-align: center;
- } .add { padding: 5px; border: 1px solid black; margin-bottom: 10px; }
- </style>
- </head>
- <body>
- <div id="app">
- <div class="add">
- 编号:
- <input id="id" v-color="color" v-focus="focus" type="text" v-model="id">
- 品牌名称:
- <input v-model="name" type="text">
- <button @click="add">
- 添加
- </button>
- </div>
- <div class="add">
- 品牌名称:
- <input type="text">
- </div>
- <div>
- <table class="tb">
- <tr>
- <th>
- 编号
- </th>
- <th>
- 品牌名称
- </th>
- <th>
- 创立时间
- </th>
- <th>
- 操作
- </th>
- </tr>
- <tr v-if="list.length <= 0">
- <td colspan="4">
- 没有品牌数据
- </td>
- </tr>
- <!--加入: key="index" 时候必须把所有参数写完整 -->
- <tr v-for="(item,key,index) in list" :key="index">
- <td>
- {{item.id}}
- </td>
- <td>
- {{item.name}}
- </td>
- <td>
- {{item.ctime | dateFrm("/") |addNoon}}
- </td>
- <!-- 使用vue来注册事件时,我们在dom元素中是看不到的 -->
- <td>
- <a href="javascript:void(0)" @click="del(item.id)">
- 删除
- </a>
- </td>
- </tr>
- </table>
- </div>
- </div>
- </body>
- </html>
- <script src="vue2.4.4.js">
- </script>
- <script>
- // 使用全局过滤器(公有过滤器)
- Vue.filter("dateFrm",
- function(time, spliceStr) {
- // return "2017-11-16";
- var date = new Date(time);
- //得到年
- var year = date.getFullYear();
- // 得到月
- var month = date.getMonth() + 1;
- // 得到日
- var day = date.getDate();
- return year + spliceStr + month + spliceStr + day;
- });
- // 先将自定义指令定义好
- // directive有两个参数
- //参数一: 自定义指令 v-focus
- //参数二: 对象,对象中可以添加很多方法
- // 添加一个inserted方法:而这个方法中又有两个参数:
- //参数一:el 当前使用自定义指令的对象
- //参数二:obj 是指它(v-color="color" )后面设置的表达式
- //{expression:"color",value:"red",}
- Vue.directive("focus", {
- inserted: function(el, obj) {
- // console.log(el);
- el.focus();
- }
- });
- Vue.directive("color", {
- inserted: function(el, obj) {
- // obj.style.color = "red";
- obj.style.color = obj.value; //????????????
- console.log(obj.value);
- }
- });
- var vm = new Vue({
- el: "#app",
- data: {
- color: "green",
- id: 0,
- name: ‘‘,
- list: [{
- "id": 1,
- "name": "itcast",
- "ctime": Date()
- },
- {
- "id": 2,
- "name": "黑马",
- "ctime": Date()
- }]
- },
- // mounted(){
- // this.getFocus()
- // },
- methods: {
- add: function() {
- //将id和namepush到list数组中
- this.list.push({
- "id": this.id,
- "name": this.name,
- "ctime": Date()
- });
- },
- del: function(id) {
- // 根据id得到下标
- // 默认去遍历list集合,将集合中的每个元素传入到function的item里,
- var index = this.list.findIndex(function(item) {
- //根据item中的id属性来判断这个item是否是上面id中
- //对应的数据,如果是返回一个true ,否返回false,继续下面的一条数据的遍历,以此类推
- return item.id == id; //如果返回true,那么findIndex方法会将这个item对应的id返回到外面接受
- });
- // 根据下标在list集合中将对应的数据删除
- // splice(开始删除的下标,删除的长度)
- this.list.splice(index, 1);
- }
- }
- });
- </script>
Vue--过滤器(私有和公有)
nbsp otto als getdate 名称 ava -s click 默认
原文:http://www.cnblogs.com/mrszhou/p/7858994.html
来源: http://www.bubuko.com/infodetail-2400322.html