今天拿好闺蜜的作业用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.一定要注意参数问题。

 

 

# 前端 # 经验分享 # css
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue