VueJS应用示例代码：客户管理的界面设计
客户详细信息
下面示例演示一个客户管理的界面设计，参考以下文件(customer-details.html)代码 -
<html>
<head>
<meta charset="utf-8" />
<title>示例2：客户详细信息</title>
<script type = "text/javascript" src = "js/vue.js"></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" style = "">
<h1>客户详细信息</h1>
<span>名字：</span>
<input type = "text" placeholder = "Enter Name" v-model = "name"/><br/>
<span>电话：</span>
<input type = "text" placeholder = "Enter Phone" v-model = "phone"/><br/>
<span>地址：</span>
<input type = "text" placeholder = "Enter Address" 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.name"
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.name}}</p></div><div class = "Cell"><p>{{itr.phone}}</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({
name: this.name,
phone: this.phone,
addr : this.addr
});
this.name = "";
this.phone = "";
this.addr = "";
}
}
});
</script>
</body>
</html>
说明 - 在上面的例子中，我们有三个文本框输入 - 名字，电话和地址。 有一个添加按钮，它将在表格格式中输入的值添加到文本框中，并带有删除按钮。
表格式是使用组件创建的。 单击按钮使用emit事件与父组件进行交互，以从数组中删除元素。输入的值存储在数组中，并使用prop属性与子组件共享。
THE END
