美文网首页
vue.js 的常用指令

vue.js 的常用指令

作者: 紫由袅 | 来源:发表于2017-08-22 17:13 被阅读13次

    v-if v-else v-show 指令

    v-if:判断是否加载,可以减轻服务器的压力,在需要时加载。

    v-show:调整css display属性,可以使客户端操作更加流畅。

     v-for指令

    解决模板循环问题v-for指令是循环渲染一组data中的数组,v-for 指令需要以item in item 形式的特殊语法,items是原数据数组并且item,是数组元素迭代的别名你的需求是需要哪个标签循环

    在上一篇文章《v-for指令:解决模板循环问题》有讲

    v-text 和 v-html

    当网速慢的时候会出现bug ,可以使用v-text直接输出html标签

     v-html,在项目中尽量少用,会引起黑客攻击

     v-on 指令

    @的简写

     v-model 数据源绑定

    经常使用在表单里面修饰符:

    v-model.lazy  延迟出现v

    -model.number  只有里面是数字才可以被绑定,一开始输入为计算

    v-model.trim  把前后的空格删除

    文本框、文本域、多选框、单选框的双向数据绑定

    多选按钮绑定一个值多选绑定一个数组,记得代码里面要绑定一个value 

    value值跟id值是一样的,

    v-model="name1",

    数据源绑定的是同一个数组data:{name1:[],}

     v-bind 指令标签属性绑定

    简写 冒号:绑定的标签属性:绑定的时候都需要在data里面进行声明绑定class 中的属性和绑定class 中的判断 :

    class绑定class中的数组    

    :class 绑定class中的三元运算符:

    class绑定Style      :style

    绑定style

    在data里面声明的代码:data:{yellow:'yellow',font:'30px',}

    对象绑定Style  :style

    绑定style对象

    在data里面的代码:

      styleObject:{                    

        color:'orange',                    

        fontSize :'40px',                                    

            }

    在vue里面不支持-的写法,比如front-size,要写成frontSize

     其他指令

    这几个指令都是直接使用,直接在div或者其他标签里面加入v-pre就可以了

    v-pre 原样输出

      v-cloak  渲染完成后,才显示

      v-once 只在第一次的时候渲染

    相关文章

      网友评论

          本文标题:vue.js 的常用指令

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