srcmini在上一节中，我们学习了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>
说明——在上面的例子中，我们创建了一个货币转换器，它将货币的一个值转换为其他货币的选定值。当我们在文本框中输入要转换的金额时，转换后将显示相同的内容，这里使用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>
说明——在上面的例子中，我们需要输入三个文本框——名字、姓氏和地址。有一个add按钮，用于添加用户，用delete按钮删除用户。
表格式是使用组件创建的，click按钮与父组件交互，使用emit事件从数组中删除元素，输入的值存储在数组中，并使用prop属性与子组件共享相同的值。
评论前必须登录！
注册