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="http://img.readke.com/220411/091Z551T-0.jpg">< /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="http://www.srcmini.com/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="http://www.srcmini.com/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>

文章图片
【2个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="http://img.readke.com/220411/091Z551T-0.jpg">< /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>