Web前端基于Vue实验的实现

最新推荐文章于 2024-07-17 15:26:15 发布

七号码农

最新推荐文章于 2024-07-17 15:26:15 发布

阅读量104

点赞数

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/m0_57491320/article/details/130153960

版权

1.使用jquery或vue实现如下界面效果：

提示：

奇数行背景色：#FFF38F；偶数行背景色：#FFFFEE;选中行：#FF6500
选中行时，设置单选框选中状态

代码实现：

<template>
 <div>
    <table>
        <tr>
        <th></th>
        <th>姓名</th>
        <th>性别</th>
        <th>暂住地</th>
    </tr>
    <tr v-for="item,index in list" :key = index :class="{'odd':index%2!=0,'even':index%2==0}" ref="li">
        <td><input  type="radio" value=1 @change="change(index)"></td>
        <td>{{ item.name }}</td>
        <td>{{ item.sex }}</td>
        <td>{{ item.position }}</td>
        
    </tr>

    </table>
 </div>
</template>

<script>
 export default {
 data () {
 return {
    list:[
    {name:"张三",sex:"男",position:"四川成都"},
    {name:"李四",sex:"女",position:"四川绵阳"},
    {name:"王五",sex:"男",position:"四川南充"},
    {name:"赵六",sex:"男",position:"四川自贡"},
    {name:"陈勇",sex:"男",position:"四川德阳"},
    {name:"罗梅",sex:"女",position:"四川宜宾"}
]
  }
 },
 methods:{
    change(index){
        //this.$refs.test.style.background = "red";
        this.$refs.li[index].style.background=" #FF6500"
    }

 }
}

</script>
<style scoped>
.odd{
    background-color:#FFFFEE;
}
.even{
    background-color: #FFF38F;
}
table{
    border: 1px solid #000;
    border-collapse:collapse;
    width: 500px;
}
td{
    width: 100px;
    border: 1px solid #000;
}
th{
    width: 100px;
    border: 1px solid #000;
}
</style>

主要通过vue内嵌的$ref属性以及change事件和class的绑定属性来实现效果

2.使用jquery或vue实现内容过滤，效果如下图所示：

代码实现：

代码：
<template>
 <div>
    <div>
    <div id="search">查询：</div>
    <div><input v-model="searchdata" type="text"></div>
    </div>
    <table>
        <tr>
        <th></th>
        <th>姓名</th>
        <th>性别</th>
        <th>暂住地</th>
    </tr>
    <tr v-for="item,index in list" :key = index v-show="flag[index]" :class="{'odd':index%2!=0,'even':index%2==0}" ref="li">
        <td><input type="radio" value=1 @change="change(index)"></td>
        <td>{{ item.name }}</td>
        <td>{{ item.sex }}</td>
        <td>{{ item.position }}</td>
        
    </tr>

    </table></div>
</template>

<script>
import input from './input.vue';
 export default {
  components: { input },
 data () {
 return {
    list:[],
 originlist:[
    {name:"张山",sex:"男",position:"浙江宁波"},
    {name:"李四",sex:"女",position:"浙江杭州"},
    {name:"王五",sex:"男",position:"湖南长沙"},
    {name:"赵六",sex:"男",position:"浙江温州"},
    {name:"陈勇",sex:"男",position:"浙江杭州"},
    {name:"罗梅",sex:"女",position:"浙江杭州"}
 ],
 flag:[true,true,true,true,true,true],
 searchdata:""
  }
 },
 methods:{
    change(index){
        //this.$refs.test.style.background = "red";
        this.$refs.li[index].style.background=" #FF6500";
        
    },
 },
 watch:{
    /*handler（新值，旧值）

filperson是个空数组，用来接收persons通过过滤后的数组，上面遍历的数组也是这个数组

person是一个原数组，里面包含所以的元素

filter是筛选的工具，返回值时是筛选名字中存在的值*/

            searchdata:{
                immediate:true,//在框的值还没变化时执行如下函数显示出所有的情况,immediate：TRUE 可以让页面加载的的自动加载一次
                handler(val){
                    this.list = this.originlist.filter((p)=>{
                    return p.name.indexOf(val) !==-1
                })
                }
            }
        }
}

</script>
<style scoped>
.odd{
    background-color:#FFFFEE;
}
.even{
    background-color: #FFF38F;
}
table{
    border: 1px solid #000;
    border-collapse:collapse;
    width: 500px;
}
td{
    width: 100px;
    border: 1px solid #000;
}
th{
    width: 100px;
    border: 1px solid #000;
}
#search{
    float: left;
}
</style>

在上一题交替的效果上，通过watch监听属性来实现模糊查询的效果

3.使用 JQuery或vue 实现级联选择框，界面实现效果参考如下图。

代码实现：

template>
 <div>
<select id="province" @change="change($event)" v-model="option">
    <option v-for="province,index in provinces" :key="index" :value="province.value">
        {{ province.text }}
    </option>
</select>
<select v-model="follow">
    <option v-for="item,index in cities" :key="index" v-show="option==item.id">
                    {{item.text}}
    </option>
</select>
</div>
</template>

<script>
 export default {
 data () {
 return {
    provinces:[
        {text:"请选择",value:0},
        {text:"河北省",value:1},
        {text:"辽宁省",value:2},
        {text:"山东省",value:3}
],
    option:0,
    cities:[ 
            {text:"请选择",id:1},
            {text:"石家庄",id:1},
            {text:"邯郸",id:1},
            {text:"唐山",id:1},
            {text:"张家口",id:1},
            {text:"廊坊",id:1},
            {text:"请选择",id:2},
            {text:"沈阳市",id:2},
            {text:"大连市",id:2},
            {text:"鞍山市",id:2},
            {text:"抚顺市",id:2},
            {text:"本溪市",id:2},
            {text:"请选择",id:3},
            {text:"济南市",id:3},
            {text:"青岛市",id:3},
            {text:"淄博市",id:3},
            {text:"枣庄市",id:3},
            {text:"东营市",id:3},
 
        ],
  }
 },
 methods:{
    change(e){
       this.option=e.target.value
    },
 }
}

</script>
<style scoped>
</style>

此题有更好的代码优化方式，笔者只是完成实验，未做进一步优化，选择了通过父级Id的方式将子元素进行分组，通过V-show来控制是否显示

4.使用Jquery或vue实现将输入数据添加至表格中，通过点击Delete可删除所在行数据

运行截图：

代码实现：

<template>
 <div>
    <div id="add">添加新员工</div>
    <div id="first">
    <div id="name">name:</div>
    <div><input v-model="name" type="text"></div>

    <div id="email">email:</div>
    <div><input v-model="email" type="text"></div>

    <div id="salary">salary:</div>
    <div><input v-model="salary" type="text"></div>
    </div>
    <div id="submit"><button  @click="submit">Submit</button></div>
    
    <div id="table"><table>
        <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salary</th>
        <th> </th>
    </tr>
    <tr v-for="item,index in person" :key="index">
        <td>{{ item.name }}</td>
        <td>{{ item.email }}</td>
        <td>{{ item.salary }}</td>
        <td><a @click="remove(index)" href="">Delete</a></td>
    </tr>

    </table>
    </div>
    

</div>
</template>

<script>
 export default {
 data () {
 return {
    name:"",
    email:"",
    salary:"",
    person:[
        {name:"Tom",email:"tom@tom.com",salary:5000},
        {name:"Jerry",email:"jerry@sohu.com",salary:8000},
        {name:"Bob",email:"bob@tom.com",salary:10000}
]
  }
 },
 methods:{
    remove(index){
        this.person.splice(index,1);
    },
    submit(){
        var data = {name:this.name,email:this.email,salary:this.salary}
        this.person.push(data)
        console.log(data)
    }
 }
}

</script>
<style scoped>
table{
    border: 1px solid #000;
    border-collapse:collapse;
    width: 400px;
}
td{
    width: 50px;
    border: 1px solid #000;
    text-align: center;
    font-weight: 700;
}
th{
    width: 50px;
    border: 1px solid #000;
    text-align: center;
    font-weight: 900;
}
#name{
    margin-right: 5px;
}
#email{
    margin-right: 5px;
    margin-left: 10px;
}
#salary{
    margin-right: 5px;
    margin-left: 10px;
}
#first{
    display: flex;
}
#add{
    margin-left: 260px;
    margin-bottom: 20px;
}
#submit{
    margin-left: 260px;
    margin-top: 20px;
    margin-bottom: 20px;
}
#table{
    margin-left: 120px;
    margin-top: 50px;
    margin-bottom: 10px;
}
</style>

此题的数据是前端列表写死的数据，没有数据库存储，故每次重进仍然是那些数据，但是每个操作仍然是可以执行的