会使用基本的Render函数后，就会想，这怎么用 v-for/v-if/v-model;我写个vue Render函数进阶

首先是v-if 的转化使用全局组件的v 值决定组件渲染的状态，对实例中传递的props的“nnum”值得控制可以自如的切换两种状态显示。这样就是和v-if 一样使用组件了

 <div id="app">
        <mycom :v="nnum">
            <div slot="slot2">hahahhah</div>
            <div slot="slot1">ggggggggggggg</div>
        </mycom>
    </div>
    <script>
        Vue.component('mycom',{
            render:function(createElement){
                var s=this;
                if(this.v==1){
                    return createElement('div',
                       {
                        domProps:{innerHTML:'component n='+this.n}
                       })
                }else{

                    return createElement('div',
                        [this.$slots.slot1,this.$slots.slot2])
                }
            },
            props:{
                v:{
                    type:Number,
                    default:0
                },
                n:{
                    default:'hello'
                }
            }
        });
        var app=new Vue({
            el:'#app',
            data:{
                nnum:1
            }
        })
v-for 的使用需要需要使用到map 

 <div id="app">
        <mycom :v="nnum" :ar="arr">
            <div slot="slot2">hahahhah</div>
            <div slot="slot1">ggggggggggggg</div>
        </mycom>
    </div>
    <script>
        Vue.component('mycom',{
            render:function(createElement){
                if(this.v==1){
                    return createElement('div',
                            this.ar.map(function(item){
                                return createElement('li',
                                    {
                                        domProps:{
                                            innerHTML:item
                                        }
                                    })
                            })
                       )
                }else{

                    return createElement('div',
                        [this.$slots.slot1,this.$slots.slot2])
                }
            },
            props:{
                v:{
                    type:Number,
                    default:0
                },
                n:{
                    default:'hello'
                },
                ar:{
                    type:Array,
                    default:function(){ return [1,23,4,5,6,55,65]}
                }

            }
        });
        var app=new Vue({
            el:'#app',
            data:{
                nnum:1,
                arr:[1,2,3,4,5,6,7,8]
            }
        })
    </script>
    </body>

只有map方法才能检测改变，其他的方法不能根据数据的改变能改变相应的状态

下的例子中的arr数组   依靠 apply的方法来实现的就不能够检测this.ar 的变换来重新计算

return createElement('div',
                            Array.apply(null,this.ar.map(function(item){
                                return createElement('li',
                                    {
                                        domProps:{
                                            innerHTML:'item'
                                        }
                                    })
                            }))

<body>
    <div id="app">
        <mycom :v="nnum" :ar="arr">
            <div slot="slot2">hahahhah</div>
            <div slot="slot1">ggggggggggggg</div>
        </mycom>
    </div>
    <script>
        Vue.component('mycom',{
            render:function(createElement){
                if(this.v==1){
                    return createElement('div',
                            this.ar.map(function(item){
                                return createElement('li',
                                    {
                                        domProps:{
                                            innerHTML:item
                                        }
                                    })
                            })
                       )
                }else{
                     return createElement('div',
                            Array.apply(null,this.ar.map(function(item){
                                return createElement('li',
                                    {
                                        domProps:{
                                            innerHTML:'item'
                                        }
                                    })
                            }))
                       )
                }
            },
            props:{
                v:{
                    type:Number,
                    default:0
                },
                n:{
                    default:'hello'
                },
                ar:{
                    type:Array,
                    default:function(){ return [1,23,4,5,6,55,65]}
                }

            }
        });
        var app=new Vue({
            el:'#app',
            data:{
                nnum:2,
                arr:[1,2,3,4,5,6,7,8]
            }
        })
    </script>
    </body>


v-model 使用domProps来实现双向绑定

使用对value：赋值可以将数据绑定给 input 的默认值，但是对input 的修改并不能传递给vue  这涉及到组件的通信问题，

所以想实现双向绑定，只能自己写事件来出发  vue shu'j的传递

domProps:{
                                            value:self.v
                                        }

<body>
    <div id="app">
        <mycom :v="nnum" :ar="arr">
            <div slot="slot2">hahahhah</div>
            <div slot="slot1">ggggggggggggg</div>
        </mycom>
        <div>{{nnum}}</div>
    </div>
    <script>
        Vue.component('mycom',{
            render:function(createElement){
                var self=this;
                var inp=createElement('input',
                                    {
                                        domProps:{
                                            value:self.v
                                        }
                                    });
                    return createElement('div',[inp])

                },
            props:{
                v:{
                    type:Number,
                    default:0
                },
                n:{
                    default:'hello'
                },
                ar:{
                    type:Array,
                    default:function(){ return [1,23,4,5,6,55,65]}
                }

            }
        });
        var app=new Vue({
            el:'#app',
            data:{
                nnum:100,
                arr:[1,2,3,4,5,6,7,8]
            }
        })
    </script>
    </body>
通过input触发undateValue来更新 app中的nnum 值（差点没转过弯来，render过于复杂后，真的是自己找罪受） 
 <div id="app">
        <mycom :v="nnum" :ar="arr" @input="updateValue">

        </mycom>
        <div>{{nnum}}</div>
    </div>
    <script>
        Vue.component('mycom',{
            render:function(createElement){
                var self=this;
                var inp=createElement('input',
                                    {
                                        domProps:{
                                            value:self.v
                                        },
                                        on:{
                                          input:function(event){
                                            self.$emit('input',event.target.value)

                                          }
                                        }
                                    });
                    return createElement('div',[inp])

                },
            props:{
                v:{
                    type:Number,
                    default:0
                },
                n:{
                    default:'hello'
                },
                ar:{
                    type:Array,
                    default:function(){ return [1,23,4,5,6,55,65]}
                }

            },
            methods:{
                update:function(){

                }
            }
        });
        var app=new Vue({
            el:'#app',
            data:{
                nnum:100,
                arr:[1,2,3,4,5,6,7,8]
            },
            methods:{
                updateValue:function(value){
                    this.nnum=parseFloat(value);
                }
            }
        })

    </script>
    </body>


Logo
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}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue