开发手册 欢迎您!
软件开发者资料库

VueJS - 示例

VueJS示例 - 从简单和简单的步骤学习VueJS,从基本到高级概念,包括概述,环境设置,简介,实例,模板,组件,计算属性,监视属性,绑定,事件,渲染,过渡和动画,指令,路由,混合,渲染功能,反应接口,示例。

示例1:货币转换器

         VueJs Instance                                       

Currency Converter

         Enter Amount:

         Convert From:                     {{a.desc}}                  Convert To:                     {{a.desc}}         

          {{amount}} {{convertfrom}} equals {{finalamount}} {{convertto}}      
                     var vm = new Vue({            el: '#databinding',            data: {               name:'',               currencyfrom : [                  {name : "USD", desc:"US Dollar"},                  {name:"EUR", desc:"Euro"},                  {name:"INR", desc:"Indian Rupee"},                  {name:"BHD", desc:"Bahraini Dinar"}               ],               convertfrom: "INR",               convertto:"USD",               amount :""            },            computed :{               finalamount:function() {                  var to = this.convertto;                  var from = this.convertfrom;                  var final;                  switch(from) {                     case "INR":                     if (to == "USD") {                        final = this.amount * 0.016;                     }                     if (to == "EUR") {                        final = this.amount * 0.013;                     }                     if (to == "INR") {                        final = this.amount;                     }                     if (to == "BHD") {                        final = this.amount * 0.0059;                     }                     break;                     case "USD":                     if (to == "INR") {                        final = this.amount * 63.88;                     }                     if (to == "EUR") {                        final = this.amount * 0.84;                     }                     if (to == "USD") {                        final = this.amount;                     }                     if (to == "BHD") {                        final = this.amount * 0.38;                     }                     break;                     case "EUR":                     if (to == "INR") {                        final = this.amount * 76.22;                     }                     if (to == "USD") {                        final = this.amount * 1.19;                     }                     if (to == "EUR") {                        final = this.amount;                     }                     if (to == "BHD") {                        final = this.amount * 0.45;                     }                     break;                     case "BHD":                     if (to == "INR") {                        final = this.amount *169.44;                     }                     if (to == "USD") {                        final = this.amount * 2.65;                     }                     if (to == "EUR") {                        final = this.amount * 2.22;                     }                     if (to == "BHD") {                        final = this.amount;                     }                     break                  }                  return final;               }            }         });         

输出(转换为美元)

转换为美元

输出:转换为BHD

转换为BHD

解释 : 在上面的示例中,我们创建了一个货币转换器,可将一个货币值转换为其他货币的选定值.我们创建了两个货币下拉菜单.当我们在文本框中输入要转换的金额时,转换后会显示相同的金额.我们使用计算属性来进行货币转换的必要计算.

示例2:客户详细信息

         VueJs Instance                                       

Customer Details

         First Name                  Last Name                  Address                  Add         
         
                        
                     Vue.component('customercomponent',{            template : '

{{itr.fname}}

{{itr.lname}}

{{itr.addr}}

X

',            props: ['itr', 'index'],            data: function() {               return {                  styleobj : {                     backgroundColor:this.getcolor(),                     fontSize : 20                  }               }            },            methods:{               getcolor : function() {                  if (this.index % 2) {                     return "#FFE633";                  } else {                     return "#D4CA87";                  }               }            }         });         var vm = new Vue({            el: '#databinding',            data: {               fname:'',               lname:'',               addr : '',               custdet:[],               styleobj: {                  backgroundColor: '#2196F3!important',                  cursor: 'pointer',                  padding: '8px 16px',                  verticalAlign: 'middle',               }            },            methods :{               showdata : function() {                  this.custdet.push({                     fname: this.fname,                     lname: this.lname,                     addr : this.addr                  });                  this.fname = "";                  this.lname = "";                  this.addr = "";               }            }         });         

输出

输出

删除后输出

删除后输出

解释 : 在上面的例子中,我们有三个要输入的texbox  - 名字,姓氏和地址.有一个添加按钮,它使用删除按钮以表格格式添加在文本框中输入的值.

表格式是使用组件创建的.单击按钮使用emit事件与父组件交互,以从数组中删除elemet.输入的值存储在数组中,并使用 prop 属性与子组件共享.