最新公告
  • 欢迎您光临网站无忧模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 一招搞定Vue常用指令

    正文概述 六哥   2021-05-8   55

    本篇文章给大家详细介绍一下Vue的常用指令。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

    插入文本:

    v-text

    相当于元素的innerText属性,必须是双标签

    插入HTML:

    相当于元素的innerHTML属性

    循环遍历

    v-for的使用,除了item属性,还有一些其他辅助属性

     /* 在html中使用v-for指令进行渲染 */
    /*
     普通数组
     */
      data:{
          list:[1,2,3,4,5,6]
       }
      <p v-for="(item,i) in list">--索引值--{{i}}   --每一项--{{item}}</p>
    
    /*
     对象数组
     */
     data:{
          list:[1,2,3,4,5,6],
          listObj:[
            {id:1, name:'zs1'},
            {id:2, name:'zs2'},
            {id:3, name:'zs3'},
            {id:4, name:'zs4'},
            {id:5, name:'zs5'},
            {id:6, name:'zs6'},
          ]
    }
       <p v-for="(user,i) in listObj">--id--{{user.id}}   --姓名--{{user.name}}</p>
    
    /*
      对象
      */
      data:{
          user:{
            id:1,
            name:'托尼.贾',
            gender:'男'
          }
     }
     <p v-for="(val,key) in user">--键是--{{key}}--值是--{{val}}</p>
    
    /*
     数字
     <!-- 注意:如果使用v-for迭代数字的话,前面 count 的值从 1 开始-->
     */
    <p v-for="count in 10">这是第{{count}}次循环</p>

    条件渲染

    v-if:是否插入元素

    v-show是否隐藏元素,根据CSS进行元素的渲染

    属性绑定

    v-bind:属性名=“常量 || 变量名”

    简写形式:属性名=“常量 || 变量名”

    <p v-bind:属性名="变量"></p>
    //可以简写成
    <p :属性名="变量"></p>
    
    //如果要赋值常量,需要给常量用单引号包起来,如
    <p :属性名=" '常量' "></p>

    双向绑定:v-model

    所谓的双向绑定,就是你在视图层里面改变了值,vue里面对应的值也会改变。只能给具备value属性的元素进行双向数据绑定。

    绑定事件:v-on

    v-on:click = “方法名 || 直接改变 vue 内部变量”,

    简写形式:@click = “方法名 || 直接改变 vue 内部变量”

    <p v-on:click=" num = 1 "></p>
    //可以简写成
    <p @click=" num = 1 "></p>

    跳过元素节点

    v-pre:跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

    只渲染一次

    v-once:只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

    推荐学习:vue.js教程

    以上就是一招搞定Vue常用指令的详细内容,更多请关注网站无忧资源网其它相关文章!


    网站无忧 » 一招搞定Vue常用指令

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    发表评论

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者
    升级SVIP尊享更多特权立即升级