VueJS 实例



  • Vue 货币转换器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>蝴蝶教程(jc2182.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>蝴蝶教程(jc2182.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属性与子组件共享。