个性化阅读
专注于IT技术分析

2个VueJS实战开发实例

在上一节中,我们学习了VueJS响应接口的用法,其中主要包括vue.watch、vue.set和vue.delete的使用。在本节我们提供2个VueJS实战开发的实例,其中第一个是使用VueJS实现货币转换器,第二个实例是实现用户管理。

1、VueJS实现货币转换器

<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>VueJS - 货币转换器</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
    <style>
        #app {
            padding: 20px 15px 15px 15px;
            margin: 0 0 25px 0;
            width: auto;
            background-color: #e7e7e7;
        }

        span,
        option,
        input {
            font-size: 25px;
        }
    </style>

    <div id="app" style="">
        <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 type="text/javascript">
        var app = new Vue({
            el: '#app',
            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;
                }
            }
        });
    </script>
</body>

</html>
VueJS货币转换器实例

说明——在上面的例子中,我们创建了一个货币转换器,它将货币的一个值转换为其他货币的选定值。当我们在文本框中输入要转换的金额时,转换后将显示相同的内容,这里使用computed属性来进行货币转换所需的计算。

2、VueJS实现用户管理

<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>VueJS - 用户资料详情</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
    <style>
        #app {
            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="app" style="">
        <h1>用户资料详情</h1>
        <span>名字</span>
        <input type="text" placeholder="输入名字" v-model="fname" />
        <span>姓</span>
        <input type="text" placeholder="输入姓" v-model="lname" />
        <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 type="text/javascript">
        Vue.component('customercomponent', {
            template: '<div class = "Table"><div class = "Row"  v-bind:style = "styleobj"><div class = "Cell"><p>{{itr.fname}}</p></div><div class = "Cell"><p>{{itr.lname}}</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: '#app',
            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>
VueJS实现用户管理资料详情

说明——在上面的例子中,我们需要输入三个文本框——名字、姓氏和地址。有一个add按钮,用于添加用户,用delete按钮删除用户。

表格式是使用组件创建的,click按钮与父组件交互,使用emit事件从数组中删除元素,输入的值存储在数组中,并使用prop属性与子组件共享相同的值。

赞(0) 打赏
未经允许不得转载:srcmini » 2个VueJS实战开发实例
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏