VUE的总结(5)

63.解决非工程化项目初始化页面闪动问题(好题,理解)

vue页面在加载的时候闪烁花括号{},v-cloak指令和css规则如[v-cloak]{display:none}一起用时,这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。{{name}}    data:  name:''

/*css样式*/

[v-cloak] {

      display: none;

    }

   

         

  • {{item.text}}
  •    

 

64.v-for产生的列表,实现active的切换 tab切换 

v-for生成序列 

  • {{info.name}}

data数据

 

list:[
 
        {
 
          name:'a',
 
          id:1,
 
          active:false
 
        },
 
        {
 
          name:'b',
 
          id:2,
 
          active:false
 
        },
 
        {
 
          name:'c',
 
          id:3,
 
          active:false
 
        },
 
        {
 
          name:'d',
 
          id:4,
 
          active:false
 
        },
 
      ]

点击事件 

select(d){
 
      this.list.map(s=>s.active=false); //for  forEach  map  filter some
 
      this.list[d].active=true;
 
    },

 65.v-model语法糖使用

v-model语法糖  v-model其实是一种简写方式,我们常见的有两种v-model,分别是input元素上的v-model 和非input元素上v-model

input元素上的:    


 
     
 
     
 
      data(){
 
        return {
 
          price: 20
 
         }
 
      }
 
 非input元素上的:
 
 Vue.component('base-checkbox', {
 
  model: {
 
    prop: 'checked',
 
    event: 'change'
 
  },
 
  template: `
 
     
      type="checkbox"
 
      v-bind:checked="checked"
 
      v-on:change="$emit('change', $event.target.checked)"
 
    >
 
  `
 
})
 
父组件: 

 66.十个常用的自定义过滤器

(1)去除空格  

type:1-所有空格  2-前后空格  3-前空格 4-后空格。

(2)任意格式日期处理

(3)字母大小写切换

type:1:首字母大写 2:首页母小写 3:大小写转换 4:全部大写 5:全部小写

(4)字符串循环复制,count->次数.

(5)字符串替换

(6)字符替换*,隐藏手机号或者身份证号等

(7)格式化处理字符串

(8)现金额大写转换函数

(9)保留2位小数   0.3 + 0.9 != 1.2  (10)补零

你可能感兴趣的:(vue.js,javascript,ecmascript)