上一节:

  VueJS 实例

  • Vue 货币转换器

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜鸟教程(cainiaoya.com)</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <style>
      #databinding{
          padding: 20px 15px 15px 15px;
          margin: 0 0 25px 0;
          width: auto;
          background-color: #e7e7e7;
      }
      span, option, input {
          font-size:25px;
      }
    </style>
    <div id = "databinding">
      <h1>货币换算</h1>
      <span>输入金额：</span><input type = "number" v-model.number = "amount" placeholder = "请输入金额" /><br/><br/>
      <span>由：</span>
      <select v-model = "convertfrom" style = "width:300px;font-size:25px;">
          <option v-for = "(a, index) in currencyfrom"  v-bind:value = "a.name">{{a.desc}}</option>
      </select>
      <span>转换成：</span>
      <select v-model = "convertto" style = "width:300px;font-size:25px;">
          <option v-for = "(a, index) in currencyfrom" v-bind:value = "a.name">{{a.desc}}</option>
      </select><br/><br/>
      <span> {{amount}} {{convertfrom}} = {{finalamount}} {{convertto}}</span>
    </div>
    
    <script>
      var vm = new Vue({
        el: '#databinding',
        data: {
          name:'',
          currencyfrom : [
              {name : "美元", desc:"美元"},
              {name:"欧元", desc:"欧元"},
              {name:"人民币", desc:"人民币"},
              {name:"日元", desc:"日元"}
          ],
          convertfrom: "人民币",
          convertto:"美元",
          amount :""
        },
        computed :{
          finalamount:function() {
              var to = this.convertto;
              var from = this.convertfrom;
              var final;
              switch(from) {
                case "人民币":
                if (to == "美元") {
                    final = this.amount * 0.1430;
                }
                if (to == "欧元") {
                    final = this.amount * 0.1282;
                }
                if (to == "人民币") {
                    final = this.amount;
                }
                if (to == "日元") {
                    final = this.amount * 15.6634;
                }
                break;
                case "美元":
                if (to == "人民币") {
                    final = this.amount * 6.9953;
                }
                if (to == "欧元") {
                    final = this.amount * 0.8965;
                }
                if (to == "美元") {
                    final = this.amount;
                }
                if (to == "日元") {
                    final = this.amount * 109.57;
                }
                break;
                case "欧元":
                if (to == "人民币") {
                    final = this.amount * 7.8033;
                }
                if (to == "美元") {
                    final = this.amount * 1.1155;
                }
                if (to == "欧元") {
                    final = this.amount;
                }
                if (to == "日元") {
                    final = this.amount * 122.2253;
                }
                break;
                case "日元":
                if (to == "人民币") {
                    final = this.amount *0.06384;
                }
                if (to == "美元") {
                    final = this.amount * 0.009127;
                }
                if (to == "欧元") {
                    final = this.amount * 0.008182;
                }
                if (to == "日元") {
                    final = this.amount;
                }
                break
              }
              return final;
          }
        }
      });
    </script>
</body>
</html>
    尝试一下
    输出结果如下：
    案例1
    示例说明
    在上面的示例中，我们创建了一个货币转换器，将一个货币值转换为另一种货币的选定值。 我们创建了两个货币下拉列表。 当我们在文本框中输入要转换的金额时，转换后下方会显示相同的金额。 我们正在使用计算属性来进行货币换算的必要计算。

  • Vue 添加用户信息

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜鸟教程(cainiaoya.com)</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <style>
      #databinding{
          padding: 20px 15px 15px 15px;
          margin: 0 0 25px 0;
          width: auto;
      }
      span, option, input {
          font-size:20px;
      }
      .Table{
          display: table;
          width:80%;
      }
      .Title{
          display: table-caption;
          text-align: center;
          font-weight: bold;
          font-size: larger;
      }
      .Heading{
          display: table-row;
          font-weight: bold;
          text-align: center;
      }
      .Row{
          display: table-row;
      }
      .Cell{
          display: table-cell;
          border: solid;
          border-width: thin;
          padding-left: 5px;
          padding-right: 5px;
          width:30%;
      }
    </style>
    <div id = "databinding">
        <h1>用户信息</h1>
        <span>姓氏：</span>
        <input type = "text" placeholder = "请输入姓氏" v-model = "lname"/>
        <span>名字：</span>
        <input type = "text" placeholder = "请输入名字" v-model = "fname"/>
        <span>地址：</span>
        <input type = "text" placeholder = "请输入地址" v-model = "addr"/>
        <button v-on:click = "showdata" v-bind:style = "styleobj">添加</button>
        <br/>
        <br/>
        <customercomponent
          v-for = "(item, index) in custdet"
          v-bind:item = "item"
          v-bind:index = "index"
          v-bind:itr = "item"
          v-bind:key = "item.fname"
          v-on:removeelement = "custdet.splice(index, 1)">
        </customercomponent>
    </div>
    
    <script>
        Vue.component('customercomponent',{
          template : '<div class = "Table"><div class = "Row"  v-bind:style = "styleobj"><div class = "Cell"><p>{{itr.lname}}</p></div><div class = "Cell"><p>{{itr.fname}}</p></div><div class = "Cell"><p>{{itr.addr}}</p></div><div class = "Cell"><p><button v-on:click = "$emit(\'removeelement\')">X</button></p></div></div></div>',
          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 = "";
            }
          }
      });
    </script>
</body>
</html>
    尝试一下
    输出结果如下：
    案例2
    示例说明
    在上面的示例中，我们要输入三个texbox-名字，姓氏和地址。 有一个添加按钮，它使用删除按钮以表格格式添加在文本框中输入的值。
    该表格格式是使用组件创建的。 单击按钮使用发出事件与父组件交互，以从阵列中删除要素。 输入的值存储在数组中，并使用prop属性与子组件共享。

  • 相关知识

上一节: