今天拿好闺蜜的作业用vue来实现,也浅记一下,后续有相似的地方想不起来可以用一用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
<style>
@import url(style.css);
</style>
</head>
<body>
<h1>Customer's information</h1>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<div id="app">
Company:<input type="text" width="100px" v-model="showCompany" key="company">
Contact:<input type="text" width="100px" v-model="showContact" key="contact">
Country:<input type="text" width="100px" v-model="showCountry" key="showCountry">
<br/><br/><br/>
<button @click="changeValue(temp)">Modify</button>
<button @click="Reset">Reset</button>
<br/><br/><br/>
<div class="div1">
<table class="define-table">
<th>Company</th>
<tr @click="handelClick(index1)" v-for="(item1,index1) in Company">
<td>{{item1}}</td>
</tr>
</table>
</div>
<div class="div2">
<table class="define-table">
<th>Contact</th>
<tr @click="handelClick(index2)" v-for="(item2,index2) in Contact">
<td>{{item2}}</td>
</tr>
</table>
</div>
<div class="div2">
<table class="define-table">
<th>Country</th>
<tr @click="handelClick(index3)" v-for="(item3,index3) in Country">
<td>{{item3}}</td>
</tr>
</table>
</div>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
showCompany:'',
showContact:'',
showCountry:'',
temp:-1,
Company: ['Alfreds Futterkiste', 'Centro comercial Moetezuma', 'Erast Handel', 'Island Trading', 'Laughing Bacchus Winecellars', 'Magazini Alimentari Riuniti'],
Contact: ['Maria Anders', 'Francisco Chang', 'Roland Mendel', 'Helen Bennett', 'Yoshi Tannamuri', 'Magazini Alimentari Riuniti'],
Country: ['Gremany', 'Mexico', 'Austria', 'UK', 'Canada', 'Italy'],
},
methods:{
handelClick(a) {
this.showCompany=this.Company[a];
this.showContact=this.Contact[a];
this.showCountry=this.Country[a];
this.temp=a;
},
Reset(){
this.showCompany='';
this.showContact='';
this.showCountry='';
},
changeValue(temp){
this.Company[temp]=this.showCompany;
this.Contact[temp]=this.showContact;
this.Country[temp]=this.showCountry;
this.$forceUpdate()//强制渲染
},
}
})
</script>
</body>
</html>
h1{
text-align: center;
}
div{
text-align: center;
}
.define-table{
margin:0;
border-collapse:collapse;
border-spacing:0;
border-left:0px solid #888;
border-top:0px solid #888;
background:rgb(243, 228, 196);
}
.define-table th,.define-table td{
border-right:1px solid #888;
border-bottom:1px solid #888;
padding:5px 8px;
}
.define-table th{
font-weight:bold;
background:#ccc;
}
.define-table tr:hover{
background-color: aquamarine;
}
.active{
background-color: aquamarine;
}
.div1{
float: left;
margin-left:360px;
}
.div2{
float: left;
}
其效果如下:
在这期间有难住我的问题:
1.关于悬浮样式的设置(百度找的样式),以及如何将三个表格连在一起:把它们放在三个<div>中,然后调节位置就可以了!具体做法:把第一个先设置好位置,第二第三个利用float:left; 可以让三个div无缝拼接,这样就解决了。
2. 我的数据已经改动了,用console也是显示改过来了,但是页面上却没有渲染出来:可以使用强制渲染命令→this.$forceUpdate()。
3.一定要注意参数问题。