VUE框架CLI组件化动态三层传递实现修改选中状态------VUE框架

已于 2023-12-06 23:53:54 修改
阅读量854 收藏 13
点赞数 16
分类专栏： # VUE框架 前端 文章标签： javascript ecmascript 前端 vue.js 前端框架 vue js
于 2023-12-06 16:27:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75960169/article/details/134835033
版权 
<template>
    <div>
        <BugHeader :saveBugCallBack="saveBugCallBack"></BugHeader>
        <BugList :bugList="bugList" :modifyResolvedCallBack="modifyResolvedCallBack"></BugList>
        <BugFooter></BugFooter>
    </div>
</template>

<script>
import BugHeader from "./components/BugHeader.vue";
import BugList from "./components/BugList.vue";
import BugFooter from "./components/BugFooter.vue";
export default {
    name : "App",
    components : {BugHeader,BugList,BugFooter},
    data(){
        return {
            bugList : [
                {id : 1,desc : "Bug描述信息100",resolved : true},
                {id : 2,desc : "Bug描述信息200",resolved : false},
                {id : 3,desc : "Bug描述信息300",resolved : true},
            ]
        }
    },
    methods : {
        // 因为我们不能直接动props的数据
        // 那我们就传递一个方法过去进行修改
        saveBugCallBack(bug){
            this.bugList.unshift(bug);
        },
        modifyResolvedCallBack(id)
        {
            this.bugList.forEach((bug) => {
                if(bug.id === id){
                    bug.resolved = !bug.resolved;
                }
            });
        }

    }
}
</script>

<style>
.button{
	display: inline-block inline;
	zoom: 1;
	padding: 6px 20px;
	margin: 0;
	cursor: pointer;
	border: 1px solid #bbb;
	overflow: visible;
	font: bold 13px arial, helvetica, sans-serif;
	text-decoration: none;
	white-space: nowrap;
	color: #555;
	background-color: #ddd;
	background-image: -webkit-gradient(linear, to right top, to right bottom, form(rgba(255,255,255,1)), to(rgba(255,255,255,0)));
	background-image: -webkit-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
	background-image: -moz-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
	background-image: -ms-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
	background-image: -o-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
	background-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
	-webkit-transition: background-color .2s ease-out;
	-moz-transition: background-color .2s ease-out;
	-ms-transition: background-color .2s ease-out;
	-o-transition: background-color .2s ease-out;
	transition: background-color .2s ease-out;
	background-clip: padding-box; /* Fix bleeding */
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
	-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
	text-shadow: 0 1px 0 rgba(255,255,255, .9);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.button:active{
	background: #e9e9e9;
	position: relative;
	top: 1px;
	text-shadow: none;
	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
}
.button.red{
	color: #fff;
	text-shadow: 0 1px 0 rgba(0,0,0,.2);
	background-image: -webkit-gradient(linear, to right top, to right bottom, from(rgba(255,255,255,.3)), to(rgba(255,255,255,0)));
	background-image: -webkit-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));
	background-image: -moz-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));
	background-image: -ms-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));
	background-image: -o-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));
	background-image: linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));
}
.button.red{
	background-color: #ca3535;
	border-color: #c43c35;
}
.button.red:hover{
	background-color: #ee5f5b;
}
.button.red:active{
	background: #c43c35;
}
.button.green{
	background-color: #57a957;
	border-color: #57a957;
}
.button.green:hover{
	background-color: #62c462;
}
.button.green:active{
	background: #57a957;
}
</style>

<template>

    <div>

        <BugHeader :saveBugCallBack="saveBugCallBack"></BugHeader>

        <BugList :bugList="bugList" :modifyResolvedCallBack="modifyResolvedCallBack"></BugList>

        <BugFooter></BugFooter>

    </div>

</template>

<script>

import BugHeader from "./components/BugHeader.vue";

import BugList from "./components/BugList.vue";

import BugFooter from "./components/BugFooter.vue";

export default {

    name : "App",

    components : {BugHeader,BugList,BugFooter},

    data(){

        return {

            bugList : [

                {id : 1,desc : "Bug描述信息100",resolved : true},

                {id : 2,desc : "Bug描述信息200",resolved : false},

                {id : 3,desc : "Bug描述信息300",resolved : true},

            ]

        }

    },

    methods : {

        // 因为我们不能直接动props的数据

        // 那我们就传递一个方法过去进行修改

        saveBugCallBack(bug){

            this.bugList.unshift(bug);

        },

        modifyResolvedCallBack(id)

        {

            this.bugList.forEach((bug) => {

                if(bug.id === id){

                    bug.resolved = !bug.resolved;

                }

            });

        }

    }

}

</script>

<style>

.button{

    display: inline-block inline;

    zoom: 1;

    padding: 6px 20px;

    margin: 0;

    cursor: pointer;

    border: 1px solid #bbb;

    overflow: visible;

    font: bold 13px arial, helvetica, sans-serif;

    text-decoration: none;

    white-space: nowrap;

    color: #555;

    background-color: #ddd;

    background-image: -webkit-gradient(linear, to right top, to right bottom, form(rgba(255,255,255,1)), to(rgba(255,255,255,0)));

    background-image: -webkit-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));

    background-image: -moz-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));

    background-image: -ms-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));

    background-image: -o-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));

    background-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));

    -webkit-transition: background-color .2s ease-out;

    -moz-transition: background-color .2s ease-out;

    -ms-transition: background-color .2s ease-out;

    -o-transition: background-color .2s ease-out;

    transition: background-color .2s ease-out;

    background-clip: padding-box; /* Fix bleeding */

    -moz-border-radius: 3px;

    -webkit-border-radius: 3px;

    border-radius: 3px;

    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;

    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;

    box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;

    text-shadow: 0 1px 0 rgba(255,255,255, .9);

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    -khtml-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

}

.button:active{

    background: #e9e9e9;

    position: relative;

    top: 1px;

    text-shadow: none;

    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;

    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;

    box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;

}

.button.red{

    color: #fff;

    text-shadow: 0 1px 0 rgba(0,0,0,.2);

    background-image: -webkit-gradient(linear, to right top, to right bottom, from(rgba(255,255,255,.3)), to(rgba(255,255,255,0)));

    background-image: -webkit-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));

    background-image: -moz-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));

    background-image: -ms-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));

    background-image: -o-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));

    background-image: linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));

}

.button.red{

    background-color: #ca3535;

    border-color: #c43c35;

}

.button.red:hover{

    background-color: #ee5f5b;

}

.button.red:active{

    background: #c43c35;

}

.button.green{

    background-color: #57a957;

    border-color: #57a957;

}

.button.green:hover{

    background-color: #62c462;

}

.button.green:active{

    background: #57a957;

}

</style>

<template>
    <div>
        <table>
            <thead>
                <tr>
                    <th class="c1">全选<input type="checkbox"/></th>
                    <th>bug描述</th>
                    <th class="c2"></th>
                </tr>
            </thead>
            <tbody>
                <BugItem v-for="bug in bugList" :key="bug.id" :bug="bug" :modifyResolvedCallBack="modifyResolvedCallBack"></BugItem>
            </tbody>
        </table>
    </div>
</template>

<script>
import BugItem from "./BugItem.vue";
export default {
    name : "BugList",
    components : {BugItem},
    props : ["bugList","modifyResolvedCallBack"]
}
</script>

<style scoped>
/* list */
table{
	width: 760px;
	border-collapse: collapse;
}
table caption{
	font-size: 1em;
	font-weight: bold;
	margin: 1em 0;
}
.c1,.c2{
	width: 100px;
}
th {
	border: 1px solid #999;
	text-align: center;
	padding: 5px 0;
}
table thead tr{
	background-color: #008c8c;
	color: #fff;
}
</style>

<template>

    <div>

        <table>

            <thead>

                <tr>

                    <th class="c1">全选<input type="checkbox"/></th>

                    <th>bug描述</th>

                    <th class="c2"></th>

                </tr>

            </thead>

            <tbody>

                <BugItem v-for="bug in bugList" :key="bug.id" :bug="bug" :modifyResolvedCallBack="modifyResolvedCallBack"></BugItem>

            </tbody>

        </table>

    </div>

</template>

<script>

import BugItem from "./BugItem.vue";

export default {

    name : "BugList",

    components : {BugItem},

    props : ["bugList","modifyResolvedCallBack"]

}

</script>

<style scoped>

/* list */

table{

    width: 760px;

    border-collapse: collapse;

}

table caption{

    font-size: 1em;

    font-weight: bold;

    margin: 1em 0;

}

.c1,.c2{

    width: 100px;

}

th {

    border: 1px solid #999;

    text-align: center;

    padding: 5px 0;

}

table thead tr{

    background-color: #008c8c;

    color: #fff;

}

</style>

<template>
    <tr>
            <td><input type="checkbox" :checked="bug.resolved" @change="$event => modifyResolved(bug.id)"></td>
            <td>{{ bug.desc }}</td>
            <td><button class="samll red button">删除</button></td>
    </tr>
</template>

<script>
export default {
    name : "BugItem",
    props : ['bug',"modifyResolvedCallBack"],
    methods : {
        modifyResolved(id){
            this.modifyResolvedCallBack(id);
        }
    }
}
</script>

<style scoped>
/* item */
table tbody tr:nth-child(odd){
	background-color: #eee;
}
table tbody tr:hover{
	background-color: #ccc;
}
table tbody tr td:first-child{
	color: #f40;
}
td{
	border: 1px solid #999;
	text-align: center;
	padding: 5px 0;
}
.desc {
    cursor: pointer;
}
</style>

<template>

    <tr>

            <td><input type="checkbox" :checked="bug.resolved" @change="$event => modifyResolved(bug.id)"></td>

            <td>{{ bug.desc }}</td>

            <td><button class="samll red button">删除</button></td>

    </tr>

</template>

<script>

export default {

    name : "BugItem",

    props : ['bug',"modifyResolvedCallBack"],

    methods : {

        modifyResolved(id){

            this.modifyResolvedCallBack(id);

        }

    }

}

</script>

<style scoped>

/* item */

table tbody tr:nth-child(odd){

    background-color: #eee;

}

table tbody tr:hover{

    background-color: #ccc;

}

table tbody tr td:first-child{

    color: #f40;

}

td{

    border: 1px solid #999;

    text-align: center;

    padding: 5px 0;

}

.desc {

    cursor: pointer;

}

</style>

旧约Alatus
关注
专栏目录
Vue动态绑定class实现选中标签样式
Wzw的博客
03-10 1534
设置选中标签样式 在筛选列表中，当标签处于活跃时，需给定不同样式 <template> <div class="category-selector"> <ul class="sort-type"> <li v-for="(item, index) in sortTypeTag" :key="index"> <a href="javascript:void(0);" @click="changeSortType(it
vue-cli开发的商城源代码
01-18
首先，`vue.js` 是一个轻量级的前端框架，由尤雨溪开发，它的核心特性包括组件化、虚拟DOM、响应式数据绑定、单向数据流等。Vue.js 的设计目标是使开发过程更加简单和高效，同时提供了丰富的生态系统，如Vuex（状态...
Vue3 点击按钮切换高亮显示选中效果
青云HOMIE的博客
05-27 394
引用当前组件使用rollUp, rollDown方法即可。
Vue动态绑定radio，checkbox的选中状态
a519525531的博客
12-08 5173
<input type="radio"/> 首先是基础的radio按钮，在很多情况下我们要根据条件来判断这个按钮是否被选中，所以就需要动态设置它的选中状态，即绑定checked属性： <input type="radio" :checked="表达式"/> 在这里，选中状态并不是看checked的属性值，而是看有没有checked这个属性，即使属性值为空或true或false或任意值，都表示为选中状态。 <input type="radio" :checked="表达式"
VUE---列表增加选中效果
蓝天⊙白云的博客
11-09 573
1.table标签中绑定row-style属性 <el-table @row-click="handleTemplateClick" :show-header="false" border style="width: 100%" :data="templates" :row-style="tableRowStyle" > 2.method中增加对应方法 //设置表格行的样式 tableRowStyle({row}){ let rowStyle = {'backg
vue动态添加 li 被选样式
yangmy_Shy的博客
05-17 4638
css: <style type="text/css"> ul li {cursor: pointer;} .blue {color: #2175bc;} </style> html: <div id="app"> <ul> <li v-for="(todo, index) in todos" ...
基于vue-cli3的element-ui的一个项目的基础框架
02-25
6. **组件化开发**：使用 Element UI 提供的组件，结合自定义组件，实现功能丰富的页面。 7. **状态管理**：如果项目中涉及到多个组件间的数据共享，可能会使用 Vuex 进行状态管理。 8. **样式处理**：Element UI ...
Vue-cli3项目引入Typescript的实现方法
10-16
然后，在项目根目录下初始化Vue-cli3项目： ```bash vue create my-project ``` 进入项目目录并安装TypeScript及其Vue CLI的TypeScript插件： ```bash cd my-project npm install --save-dev typescript @vue/cli...
vue-cli.rar
12-24
9. **单元测试**：Vue CLI 也支持Vue组件的单元测试，可以使用Jest或Mocha+Chai等库进行编写。 10. **ESLint集成**：帮助开发者遵循一定的编码规范，保持代码质量，可通过插件实现ESLint的集成和自动化修复。 11. ...
vue：一组按钮的选中样式的设置
qq_37899622的博客
10-18 1455
<template> <v-container class="loan-work-queue" grid-list-xl fluid> <add-workflow-dialog v-if="showDialog.add" :showDialog="showDialog" @initWorkFlow="initWorkFlow"></add-workflow-dialog> <edit-workflow-dialog v-if="sh
vue动态绑定css选中样式
qq_39250610的博客
09-14 389
// 1.定义变量 activeHour == ‘24’ // 2.vue代码 <span @click=“hoursTab(‘24’)” v-bind:class="{ activeHour:hourTab == ‘24’}">24小时 <span @click=“hoursTab(‘48’)” v-bind:class="{ activeHour:hourTab == ‘48’}">48小时 // 3.方法 methods: { hoursTab(val) { this.hour
vue常用的指令和动态绑定样式以及选中的状态
loveliujinggive的博客
11-09 774
一、Vue常用的指令: 1、v-for循环可以循环遍历出数据简单的例子是： 2、v-on动态绑定事件简写是@click=“事件” 3、v-model 双向数据绑定 4、v-if 判断dom元素的显示和隐藏 5、动态绑定样式是用 :style="样式"或者:class=“类名” 6、v-show 也是判断dom元素的显示和隐藏 是 display：none 7、v-text 渲染字符串 8、v-html 渲染html节点及字符串 9、v-bind 绑定属性 Vue单选/多选的效果
vue列表添加多个选中状态
Armof的博客
10-28 822
在这里插入代码片 1.在vue template中添加选择种状态 <template> 在点击的状态中添加选中状态 <li class="Course-left-er-ul-lin" v-for="(item,index) in Courselist" :key="index" > <span :class="{'Course-left-er-ul-link':selected.indexOf(item)!=-1}"
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
weixin_52173250的博客
10-30 1124
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
JavaScript 生成二维码
最新发布
qq_30049249的博客
11-02 116
我试过了，这一款js库支持中英文混合。进入网站后，可以直接点击运行哟～
基于vue框架的的汇生活家居商城的设计与实现bdjlq（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
10-29 1362
项目功能：商品分类,商品信息,用户。
JavaScript中this的指向和改变this指向的方法 - 2024最新版前端秋招面试短期突击面试题【100道】
everfoot的博客
10-29 677
了解this的工作原理是掌握JavaScript的关键之一，特别是在编写复杂的应用程序时。正确使用this可以避免许多常见的问题和错误。在实际开发中，合理选择不同的绑定方法，可以让你的代码更加灵活和易于维护。掌握这些this的知识点将帮助你在前端面试中脱颖而出！祝你顺利上岸！
echarts 遍历多个图表，并添加resize缩放
licongmingli的博客
10-30 224
遍历echarst多个图表，并添加独立的缩放函数
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值