示例1:货币转换器
VueJs Instance Currency Converter
Enter Amount:
Convert From: Convert To:
{{amount}} {{convertfrom}} equals {{finalamount}} {{convertto}}
输出(转换为美元)
输出:转换为BHD
解释 : 在上面的示例中,我们创建了一个货币转换器,可将一个货币值转换为其他货币的选定值.我们创建了两个货币下拉菜单.当我们在文本框中输入要转换的金额时,转换后会显示相同的金额.我们使用计算属性来进行货币转换的必要计算.
示例2:客户详细信息
VueJs Instance Customer Details
First Name Last Name Address
输出
删除后输出
解释 : 在上面的例子中,我们有三个要输入的texbox - 名字,姓氏和地址.有一个添加按钮,它使用删除按钮以表格格式添加在文本框中输入的值.
表格式是使用组件创建的.单击按钮使用emit事件与父组件交互,以从数组中删除elemet.输入的值存储在数组中,并使用 prop 属性与子组件共享.