美文网首页
vue2.x与vue1.0一些插值和指令的比较

vue2.x与vue1.0一些插值和指令的比较

作者: 落崖惊风yxy | 来源:发表于2017-12-28 15:19 被阅读0次

    1.单次插值
    v1中单次插值语法{{*数据}},v2不能使用
    v2使用v-once指令

    <body>
        <div id="myapp">
            <p @click="pclick()">{{msg}}</p>
            <!-- 2.0版本不能使用单次插值语法{{*数据}} ,但是可以使用v-once指令-->
                  <!--2.0中使用语法{{*数据}} 报错-->
            <!-- <p @click="pclick()">{{*msg}}</p> -->
            <p @click="pclick()" v-once>{{msg}}</p>
        </div>
        <script type="text/javascript" src="vue.js"></script>
        <script type="text/javascript">
            var app=new Vue({
                el:"#myapp",
                data:{
                    rawHTML:'<span style="color:red">this should be red.</span>',
                    msg:"xixi"
                },
                methods:{
                    pclick:function(){
                        this.msg="haha"
                    }
                }
    
            }) 
        </script>
    </body>
    

    2.html插值
    v1中过滤html标签使用语法{{{数据}}},v2不能使用
    v2使用v-html指令

    <p v-html="rawHTML"></p>
    <!--v2中使用语法{{{数据}}}报错-->
    <!-- <p>{{{rawHTML}}}</p> -->
    

    3.关于表单的lazy
    v1中,lazy 当表单失去焦点的时候,存储数据,相当于blur事件
    语法示例:

    <input type="text" lazy v-model="title">
    <h1>{{title}}</h1
    

    v2不支持这样使用,但是你可以给v-model加上修饰符.lazy,效果是一样的

    <input type="text" v-model.lazy="title" >
    

    https://cn.vuejs.org/v2/guide/forms.html

    相关文章

      网友评论

          本文标题:vue2.x与vue1.0一些插值和指令的比较

          本文链接:https://www.haomeiwen.com/subject/cttvgxtx.html