vue循环重复解决，自定义过滤器，避免闪烁

vue循环重复和自定义过滤器，监听数据变化

z1340954953

7048人浏览 · 2017-12-05 09:48:15

z1340954953 · 2017-12-05 09:48:15 发布

* vue版本均为1.0

vue循环数据重复解决

v-for指定，在循环数据时候，如果出现重复的数据，会将重复数据删除，

vue1.0:只要在v-for循环的地方加上track-by="$index" <li v-for='value in arr' track-ty='$index'></li>

vue2.0+:需要在v-for上获取到index,例如:<li v-for='(value,index) in arr ' track-ty='index'></li>

vue加载避免用户看到{{}} 花括号

1>vue1.0使用 v-cloak,在使用花括号的地方

css中定义:[v-cloak]{display:none;},在节点上加上<div id='box' v-cloak>{{msg}}</div>

2>使用v-text指令替换{{text}}花括号

3>使用v-html指令替换{{{html}}}转义的花括号

	vue自定义过滤器

vue1.0提供了自带的过滤器，limitBy,orderBy等，vue中自定义过滤器语法:

Vue.filter(name,function(input){
			return xxx;
		});
举个例子：

<script src="lib/vue2.0.js"></script>
</head>
<body>
    <div id="box">
        {{a|toDou}}
    </div>
</body>
<script>
    Vue.filter('toDou',function (input) {
        return input<10?'0'+input:''+input;
    })
    var vm=new Vue({
        data:{
            a:9
        },
        methods:{

        }
    }).$mount('#box');
</script>
        vue双向过滤器

<script src="lib/vue.js"></script>
    <script>
        //<h2>welcome</h2>
        Vue.filter('filterHtml',{
            read:function(input){ //model-view
                return input.replace(/<[^<]+>/g,'');
            },
            write:function(val){ //view -> model
                console.log(val);
                return val;
            }
        });
        window.οnlοad=function(){
            var vm=new Vue({
                data:{
                    msg:'<strong>welcome</strong>'
                }
            }).$mount('#box');
        };

    </script>
</head>
<body>
<div id="box">
    <input type="text" v-model="msg | filterHtml">
    <br>
    {{{msg}}}//将html转义输出
</div>
输出的结果都是: welcome

    监听数据变化

    vm.$watch(name,fnCb);  //浅度

<script >
    var vm = new Vue({
        data:{
            a:111,
            b:22
        }
    }).$mount('#box');
    vm.$watch('a',function () {
        this.a = this.a+1;
    });
    document.onclick = function () {
        vm.a = 1;
    };
</script>
   vm.$watch(name,fnCb,{deep:true});//深度监听，属性变化也能监听到

 window.οnlοad=function(){
        var vm=new Vue({
            el:'#box',
            data:{
                json:{name:'strive',age:16},
                b:2
            }
        });

        vm.$watch('json',function(){
            alert('发生变化了');
        },{deep:true});

        document.οnclick=function(){
            vm.json.name='aaa';
        };
    };

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^