重庆分公司 重庆分公司

• 网站建设
• 网站制作
• 网站营销
• 小程序
• 新闻动态
• 成功案例
• 关于我们
028-86922220

• 网站建设
• 网站制作
• 网站营销
• 小程序
• 新闻动态
• 成功案例
• 关于我们

{{ message }}

      
Hello, Vue.js!
      Yes!
      No!
      = 25">Age: {{ age }}
      = 0">Name: {{ name }}

  
Hello, Vue.js!
  
Yes!
  
  
Age: 28
  

2.2 v-show

 
      
Hello, Vue.js!
      Yes!
      No!
      = 25">Age: {{ age }}
      = 0">Name: {{ name }}
    
  
  
  

这里代码只是v-if改为v-show

输出为

Hello, Vue.js!
Yes!
No!
Age: 28
Name: keepfool

这里区别是上面v-if直接不输出html代码，这里用display:none隐藏

2.3 v-else指令

= 25">Age: {{ age }}
Name: {{ name }}

  

 前一兄弟元素必须有 v-if 或 v-else-if，新版的vue.js新增了v-else-if用法也跟v-if一样，不过前一兄弟元素必须有v-if或v-else-if，旧版的v-else前面可以跟v-show,但新版v-else前面不能是v-show了。

2.4 v-for指令

   
Age: {{ p.age }}
   
Name: {{ p.name }}
   
Sex: {{ p.sex }}



   var myModel = {
    people:[
      {
        age: 25,
        name: 'keepfool',
        sex: 'Male'
      },
      {
        age: 26,
        name: 'keepfool2',
        sex: 'FeMale'
      },
      {
        age: 27,
        name: 'keepfool3',
        sex: 'Male2'
      }
    ]
  };
 var vm = new Vue({
  el: '#app',
  data: myModel
})

父元素用v-for，子元素可以遍历绑定的对应Array | Object | number | string

v-for还可以这样用：

2.5 v-bind指令

v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute）

   
     
       {{ n }}
     
   

 
  

又例如：

2.6 v-on指令

      

      

        
        Greet
      
      

        
        Hi
      

 
  

2.7 v-model指令

v-model在表单控件元素上创建双向数据绑定

Message is: {{ message }}

以上是“vue.js语法及常用指令有哪些”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！