VUE的总结（5）

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

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

/*css样式*/

[v-cloak] {

      display: none;

    }

<!--html代码-->

<div id="app" v-cloak>

    <ul>

      <li v-for="item in tabs">{{item.text}}</li>

    </ul>

  </div>

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

v-for生成序列 

<ul>
 
    <li v-for="(info,index) in list" :key="info.id" @click="select(index)" v-bind:class="{'active':info.active}">{{info.name}}</li>
 
</ul>

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元素上的：    

<input v-model="price"><!-- 下行的语法糖 -->
 
      <input :value="price" @input="price = $event.target.value">
 
     
 
      data(){
 
        return {
 
          price: 20
 
         }
 
      }
 
 非input元素上的：
 
 Vue.component('base-checkbox', {
 
  model: {
 
    prop: 'checked',
 
    event: 'change'
 
  },
 
  template: `
 
    <input
 
      type="checkbox"
 
      v-bind:checked="checked"
 
      v-on:change="$emit('change', $event.target.checked)"
 
    >
 
  `
 
})
 
父组件：<base-checkbox v-model="lovingVue"></base-checkbox> 

 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）补零