Vue模版语法

目录

接下来学习@click 

 例题:修改背景颜色

例题:反复点击button按钮,可以不断切换背景颜色


 先看以下例题是回顾vue的用法

  •  Vue模版语法_第1张图片
  • 
        
    {{myname}} - {{myage}}
  • 运行结果如下:vue对象被挂载到vm实例上
  • Vue模版语法_第2张图片
  • 通过在控制台直接vm.属性名修改
  • Vue模版语法_第3张图片

接下来学习@click 

可以看到@click形式是对v-on:click的简写 

 ... 


 ... 

  • Vue模版语法_第4张图片
  •  Vue模版语法_第5张图片

 vue对象的el、data、methods属性





    
    
    Document
    
    
    



    
{{myname}} - {{myage}}

在handleChange()方法里面对myname和myage的值进行修改,点击button页面刷新可以看到: 

  • Vue模版语法_第6张图片

    
{{myname}} - {{myage}}

 通过this.myname、this.myage来修改值

Vue模版语法_第7张图片

 运行结果如下:

 Vue模版语法_第8张图片

 例题:修改背景颜色

 Vue模版语法_第9张图片

Vue模版语法_第10张图片





    
    
    Document
    
    
    




    
{{myname}} - {{myage}}

例题:反复点击button按钮,可以不断切换背景颜色

Vue模版语法_第11张图片

效果如下:

Vue模版语法_第12张图片 

 





    
    
    Document
    
    
    




    
{{myname}} - {{myage}}

你可能感兴趣的:(vue.js,javascript,前端)