【vue】指令补充+样式绑定+计算属性+侦听器

代码获取

知识总结

⼀、指令补充

1.指令修饰符

1.1 什么是指令修饰符?

所谓指令修饰符就是让指令的 功能更强⼤,书写更便捷

1.2 分类
1.2.1 按键修饰符
  • @keydown.enter:当enter键按下时触发

  • @keyup.enter:当enter键抬起时触发

代码演示

<template><div><input type="text" @keydown.enter="onKeyDown"></div>
</template><script setup>
const onKeyDown = () => {console.log('onKeyDown')
}
</script><style scoped></style>
1.2.2 事件修饰符
  1. @事件名.stop —> 阻⽌冒泡

  2. @事件名.prevent —>阻⽌默认⾏为

  3. @事件名.stop.prevent —>可以连⽤ 即阻⽌事件冒泡也阻⽌默认⾏为

代码示例

<!-- @format -->
<script setup>// p标签的点击事件const onPClick = () => {console.log('onPClick')}const onDivClick = () => {console.log('onDivClick')}
</script><template><!-- 事件修饰符 --><div @click="onDivClick"><!-- .prevent: 阻止默认行为 --><ahref="https://baidu.com"@click.prevent>百度一下</a><!-- .stop: 阻止冒泡,同名事件不会向上级传递 --><p @click.stop="onPClick"></p><!-- 修饰符的链式调用: 表明两个同时阻止 --><ahref="https://baidu.com"@click.stop.prevent>百度一下</a></div>
</template><style scoped>div {width: 400px;height: 200px;background: plum;}div a {display: block;width: 100px;text-decoration: none;background: tomato;text-align: center;color: #fff;}div p {width: 200px;height: 100px;background: rebeccapurple;}
</style>
1.2.3 v-model修饰符
  • v-model.trim —> 去除⾸尾空格

  • v-model.number —> 尝试⽤parseFloat()转数字

  • v-model.lazy —> 失去焦点时同步数据,⽽不是输⼊时同步数据

代码示例

<!-- @format -->
<script setup>import { reactive } from 'vue'const goods = reactive({name: '',price: ''})
</script><template><div><!-- .lazy修饰符 --><!-- 名称:<inputtype="text"v-model.lazy="goods.name" /><br /><br /> --><!-- .trim修饰符 -->名称:<inputtype="text"v-model.trim="goods.name" /><br /><br /><!-- .number修饰符 -->价格:<inputtype="text"v-model.number="goods.price" /><br /><br /></div>
</template><style scoped></style>
1.3 总结
  1. 如何监听回⻋键?

​ 答: 1、 @keydown.enter -> 回⻋按下

​ 2、@keyup.enter -> 回⻋抬起

  1. 如何阻⽌默认⾏为、阻⽌冒泡?

​ 答: 1、@click.prevent -> 阻⽌默认⾏为

​ 2、@click.stop -> 阻⽌冒泡

​ 3、 @click.prevent.stop -> 可以链式调⽤, ⼆者都阻⽌

  1. v-model的3个修饰符的作⽤是什么?

​ 答: 1、.lazy -> 失去焦点再同步

​ 2、.trim -> 去除⾸尾空格

​ 3、.number -> 尝试转数字

2. v-model⽤在其他表单元素上

2.1 讲解内容

常⻅的表单元素都可以⽤ v-model 绑定关联, 作⽤是可以快速 获取 或 设置 表单元素的值

它会根据 控件类型 ⾃动选取 正确的属性 来更新元素

输⼊框 input:text ——> value

⽂本域 textarea ——> value

下拉菜单 select ——> value

单选框 input:radio ——> value

复选框 input:checkbox ——> checked / value

代码示例

<!-- @format -->
<script setup>
import { ref } from 'vue'
// 自我介绍
const intro = ref('')//  收集城市
const city = ref('SH')// 收集血型
const blood = ref('ab')// 是否同意用户协议
const isAgree = ref(false)// 收集爱好
const hobby = ref(['ZQ', 'PB'])
</script><template><div><!-- 文本域 --><textarea v-model="intro" cols="30" rows="4" placeholder="请输入自我介绍"></textarea><br /><br /><!-- 下菜菜单 --><select v-model="city"><option value="BJ">北京</option><option value="SH">上海</option><option value="SZ">深圳</option><option value="HZ">杭州</option></select><br /><br /><!-- 单选框:多个当中只能选择一个,需要给单选框手动添加 value 属性 --><input type="radio" value="a" v-model="blood" />A<input type="radio" value="b" v-model="blood" />B<input type="radio" value="ab" v-model="blood" />AB<input type="radio" value="o" v-model="blood" />O<br /><br /><input type="checkbox" v-model="isAgree" />是否同意用户协议<br /><br /><input v-model="hobby" type="checkbox" value="LQ" />篮球<input v-model="hobby" type="checkbox" value="ZQ" />足球<input v-model="hobby" type="checkbox" value="YMQ" />羽毛球<input v-model="hobby" type="checkbox" value="PPQ" />乒乓球<br /><input v-model="hobby" type="checkbox" value="PB" />跑步<input v-model="hobby" type="checkbox" value="YY" />游戏<input v-model="hobby" type="checkbox" value="PLT" />普拉提<input v-model="hobby" type="checkbox" value="LDW" />拉丁舞</div>
</template><style scoped></style>
2.2 总结
  1. v-model如何收集下拉列表的值?

​ 答: v-model写在select上, 关联是选中option的value

  1. v-model如何收集单选框的值?

​ 答: 给单选框添加value属性, v-model收集选中单选框的value

  1. v-model作⽤在复选框上组要注意什么?

​ 答: 1、⼀个复选框, v-model绑定 布尔值 , 关联 checked 属性

​ 2、⼀组复选框, v-model绑定 数组 , 关联 value 属性, 给复选框 ⼿动添加 value

⼆、样式绑定

1. 基本介绍

1、概述

为了⽅便开发者进⾏样式控制, Vue 扩展了 v-bind 的语法, 可以针对 class 类名 和 style ⾏内样式两个属性进⾏控制, 进⽽通过数据控制元素的样式

2、分类

2.1、操作class

2.2、操作style

2、操作class

1、语法

:class = “三元表达式 / 对象”

2、三元表达式

<p :class="条件 ? '类名1' : '类名2'"></p>

3、对象语法

当class动态绑定的是对象时,键就是类名,值就是布尔值,如果值是true,就添加这个类,否则删除这个类

<p class="box" :class="{ 类名1: 布尔值1, 类名2: 布尔值2 }"></p>

适⽤场景:⼀个类名,来回切换

4、静态class与动态class共存

静态class与动态class共存可以共存,⼆者会合并

<p class="item" :class="条件 ? '类名1' : '类名2'"></p>

3、代码演⽰

<!-- @format -->
<script setup>
import { ref } from 'vue'
// 是否激活
const isActive = ref(true)
</script><template><div><!-- 1. 三元绑定 --><p :class="isActive ? 'active' : ''">Active1</p><!-- 2. 对象绑定 --><p :class="{ active: isActive }">Active2</p><!-- 3. 静态class与动态class可以共存,二者会合并 --><p class="item" :class="{ active: isActive }">Active3</p></div>
</template><style scoped>
.active {color: red;
}
</style>

4、总结

  1. 如何通过class动态控制元素的样式?

​ 答: 1、 :class=“三元表达式”

​ 2、 :class=“{ 类名: 布尔值 }” , 布尔值为true则添加类名; 否则移除

  1. 静态和动态class可以共存吗?

​ 答:可以 共存, ⼆者会合并

5、案例-京东秒杀-tab栏切换导航⾼亮

1、需求

当我们点击哪个tab⻚签时,哪个tab⻚签就⾼亮

2、静态代码准备

<script setup>
// tabs 列表
const tabs = [{ id: 1, name: '京东秒杀' },{ id: 2, name: '每⽇特价' },{ id: 3, name: '品类秒杀' }
]
</script><template><div><ul><li><a class="active" href="#">京东秒杀</a></li></ul></div>
</template><style>
* {margin: 0;padding: 0;
}ul {display: flex;border-bottom: 2px solid #e01222;padding: 0 10px;
}li {width: 100px;height: 50px;line-height: 50px;list-style: none;text-align: center;
}li a {display: block;text-decoration: none;font-weight: bold;color: #333333;
}li a.active {background-color: #e01222;color: #fff;
}
</style>

3、思路

  1. 基于数据,动态渲染tab(v-for)

  2. 准备⼀个下标 记录⾼亮哪⼀个 tab

  3. 基于下标动态切换class的类名

4、代码实现

<script setup>
// tabs 列表
const tabs = [{ id: 1, name: '京东秒杀' },{ id: 2, name: '每⽇特价' },{ id: 3, name: '品类秒杀' }
]
import { ref } from 'vue'const activeTabIndex = ref(0)
</script><template><div><ul><li v-for="(tab, index) in tabs" :key="tab.id"><a :class="{active: activeTabIndex === index}" href="#"  @click="activeTabIndex = index">{{ tab.name }}</a></li></ul></div>
</template><style>
* {margin: 0;padding: 0;
}ul {display: flex;border-bottom: 2px solid #e01222;padding: 0 10px;
}li {width: 100px;height: 50px;line-height: 50px;list-style: none;text-align: center;
}li a {display: block;text-decoration: none;font-weight: bold;color: #333333;
}li a.active {background-color: #e01222;color: #fff;
}
</style>

6、案例-进度条

1. 操作style

<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>

2. 静态代码

<script setup></script><template><div class="progress"><div class="inner" style="width: 50%"><span>50%</span></div></div><button>设置25%</button><button>设置50%</button><button>设置75%</button><button>设置100%</button>
</template><style>
.progress {height: 25px;width: 400px;border-radius: 15px;background-color: #272425;border: 3px solid #272425;box-sizing: border-box;margin-bottom: 30px;
}.inner {height: 20px;border-radius: 10px;text-align: right;position: relative;background-color: #409eff;background-size: 20px 20px;box-sizing: border-box;transition: all 1s;
}.inner span {position: absolute;right: -25px;bottom: -25px;
}
</style>

3. 代码实现

<script setup>
import { ref } from 'vue'
const currentCount = ref(0);
const totalCount = ref(4);</script><template><div class="progress"><div class="inner" :style="{width: (currentCount / totalCount * 100) + '%'}"><span>{{currentCount / totalCount * 100}}%</span></div></div><button v-for="i in totalCount + 1" :key="index" @click="currentCount = i-1">设置{{ (i - 1) / totalCount * 100 }}%</button></template><style>
.progress {height: 25px;width: 400px;border-radius: 15px;background-color: #272425;border: 3px solid #272425;box-sizing: border-box;margin-bottom: 30px;
}.inner {height: 20px;border-radius: 10px;text-align: right;position: relative;background-color: #409eff;background-size: 20px 20px;box-sizing: border-box;transition: all 1s;
}.inner span {position: absolute;right: -25px;bottom: -25px;
}
</style>

4. 总结

  1. 如何给元素动态绑定style?

​ 答: :style=“{ 属性名1: 表达式1, 属性名2: 表达式2, … }”

三、计算属性

1. 基本使⽤

1.1 概念

基于现有的数据,计算出来的新数据; 当现有的数据变化,会⾃动重新计算。

1.2 语法
  1. 使⽤ computed 函数,计算得到⼀个新数据进⾏展⽰
const 新数据 = computed(() => {// some code ...return 结果
})
// 商品列表(原始数据)
const goodsList = ref([{ id: 1, name: '篮球', num: 1 },{ id: 2, name: '玩具', num: 3 },{ id: 3, name: '书籍', num: 2 }
])
1.3 案例

⽐如我们可以使⽤计算属性实现下⾯这个业务场景

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

1.4 静态代码
<script setup>import { ref } from 'vue'// 商品列表(原始数据)
const goodsList = ref([{ id: 1, name: '篮球', num: 1 },{ id: 2, name: '玩具', num: 3 },{ id: 3, name: '书籍', num: 2 }
])</script>
<template><h3>zxj2022的礼物清单</h3><table><tr><th>名字</th><th>数量</th></tr><tr v-for="item in goodsList" :key="item.id"><td>{{ item.name }}</td><td>{{ item.num }}个</td></tr></table><!-- ⽬标:统计求和, 展⽰礼物总数 --><p>礼物总数:? 个</p>
</template><style>
table {width: 350px;border: 1px solid #333;
}table th,
table td {border: 1px solid #333;
}table td {text-align: center;
}
</style>
1.5 代码实现
<script setup>import { ref,computed } from 'vue'// 商品列表(原始数据)
const goodsList = ref([{ id: 1, name: '篮球', num: 1 },{ id: 2, name: '玩具', num: 3 },{ id: 3, name: '书籍', num: 2 }
])
// 由于这⾥只有原始数据,没有直接给我们提供商品总数量
// 但是我们可以基于现有的 goodsList 计算得到总数量
// 那么推荐把总数量声明为 计算属性
const totalGifts = computed(() => {return goodsList.value.reduce((total, item) => total + item.num, 0)
})</script>
<template><h3>zxj2022的礼物清单</h3><table><tr><th>名字</th><th>数量</th></tr><tr v-for="item in goodsList" :key="item.id"><td>{{ item.name }}</td><td>{{ item.num }}</td></tr></table><!-- ⽬标:统计求和, 展⽰礼物总数 --><p>礼物总数:{{ totalGifts }}</p>
</template><style >
table {width: 350px;border: 1px solid #333;
}table th,
table td {border: 1px solid #333;
}table td {text-align: center;
}
</style>
1.6 注意
  1. 计算属性必须 有返回值

  2. 使⽤和 ref/reactive 数据⼀样 , 可⽤于 插值 , 也可 配合指令

1.7 总结
  1. 何时⽤计算属性?

​ 答:基于现在数据计算得到新数据的时候

  1. 语法?

import { computed } from 'vue'const totalGifts = computed(() => {return 返回值;
})

2. 计算属性 VS 普通函数

2.1 计算属性
2.1.1 作⽤

封装了⼀段对于基于现有数据,计算求得⼀个新数据

2.1.2 语法
  1. 写在computed函数中,必须返回

  2. 作为属性,直接使⽤

    • js中获取计算属性: 计算属性.value

    • 模板中使⽤计算属性:{{ 计算属性 }} 或 配合指令

2.2 普通函数
2.2.1 作⽤

封装⼀段js代码,⽤于调⽤以处理业务逻辑。

2.2.2 语法
  1. 直接在script下定义

  2. 作为函数调⽤

    • js中调⽤:函数名(实参列表)

    • 模板中调⽤ {{ 函数名 (实参列表) }} 或者 @事件名=“⽅法名(实参列表)”

  3. 计算属性的优势

    • 缓存特性(提升性能), 函数没有缓存特性

    • 计算属性会对计算出来的结果缓存, 再次使⽤直接读取缓存

    • 只有依赖项变了, 才会⾃动重新计算, 并再次缓存新数据

2.3 总结
  1. 计算属性与普通函数的区别?

​ 答: 1、计算属性基于依赖 有缓存特性,普通函数 没有缓存

​ 2、当基于现有的数据计算得到新数据,推荐使⽤计算属性

​ 3、当处理业务逻辑时,推荐使⽤函数,⽐如点击事件的处理函数

3. 计算属性的完整写法

3.1 思考

既然计算属性也是属性,能访问,应该也能修改了?

  1. 计算属性默认的写法,只能读(展⽰数据),不能 “改”

  2. 如果要 “改” → 需要⽤计算属性的完整写法

3.2 代码演⽰
<script setup>
import { computed } from 'vue'
// 完整写法 = get + set
const uname = computed({// 使⽤计算属性的时候,⾃动触发get,get内部必须 `return 计算结果`get() {// 计算得到新数据return '姬霓太美'},// 给计算属性赋值的时候,⾃动触发set,并接收赋予的新值valset(val) {// ⼀段修改逻辑console.log(val)}
})
</script>
<template><input type="text" v-model="uname" />
</template>
3.3 总结
  1. 何时使⽤计算属性完整写法?

​ 答:当 修改计算属性 时, 也就是当计算属性配合v-model的时候

  1. 完整写法的是?

​ 答: get + set

const xxx = computed({get() {return 计算结果},set(val) {}
})

4. 案例 - 全返反选

4.1 效果
image-20241013132929612
4.2 静态代码
<script setup>
import { ref } from 'vue'// 计划列表
const planList = ref([{ id: 12, name: '跑步', done: false },{ id: 76, name: '看书', done: false },{ id: 31, name: '撸码', done: false },{ id: 49, name: '追剧', done: false }
])</script><template><p><span><input type="checkbox" id="all" /><label for="all">全选</label></span><button>反选</button></p><ul><li><input type="checkbox" /><span>xxx</span></li></ul>
</template><style lang="scss">
* {margin: 0;padding: 0;
}div {width: 400px;margin: 100px auto;padding: 15px;font-size: 18px;background: plum;p {display: flex;justify-content: space-between;align-items: center;height: 40px;button {padding: 3px 6px;}}
}ul {list-style: none;li {display: flex;align-items: center;justify-content: space-between;height: 40px;border-top: 1px solid #ccc;span.completed {color: #ddd;text-decoration: line-through;}}
}input {margin-right: 8px;
}
</style>
4.3 代码实现
<script setup>
import { ref, computed } from 'vue'// 计划列表
const planList = ref([{ id: 12, name: '跑步', done: true },{ id: 76, name: '看书', done: false },{ id: 31, name: '撸码', done: false },{ id: 49, name: '追剧', done: false }
])// 全选绑定
const allDone = computed({// 使⽤计算属性⾃动触发 getget() {// every: 检测每⼀个return planList.value.every(plan => plan.done)},// 修改计算属性⾃动触发 setset(val) {// val: 给计算属性赋予的新值,在这⾥就是表全选复选框的状态// 遍历 planList 数组,把每个⼩选的 done 属性与 val 保持⼀致即可planList.value.forEach(plan => plan.done = val)}
})</script><template><p><span><input type="checkbox" id="all" v-model="allDone"/><label for="all" >全选</label></span><button @click="planList.forEach(plan => plan.done = !plan.done)">反选</button></p><ul><li v-for="(plan, index) in planList" :key="plan.id"><input type="checkbox" v-model="plan.done" /><span :class="{completed: plan.done}">{{ plan.name }}</span></li></ul>
</template><style lang="scss">
* {margin: 0;padding: 0;
}div {width: 400px;margin: 100px auto;padding: 15px;font-size: 18px;background: plum;p {display: flex;justify-content: space-between;align-items: center;height: 40px;button {padding: 3px 6px;}}
}ul {list-style: none;li {display: flex;align-items: center;justify-content: space-between;height: 40px;border-top: 1px solid #ccc;span.completed {color: #ddd;text-decoration: line-through;}}
}input {margin-right: 8px;
}
</style>

四、侦听器

1. 作⽤

监视数据变化, 执⾏DOM操作或异步操作

2. 语法

  1. 监视简单类型
<script setup>
import { ref, watch } from 'vue'// 搜索框关键字
const keyword = ref('')// 监视 keyword, 只要 keyword 的值变了, 就会执⾏回调函数
watch(keyword, (newVal, oldVal) => {// newVal: 新值// oldVal: 旧值
})</script>
<template><div><input type="text" v-model="keyword" placeholder="请输⼊关键字" /></div>
</template>
  1. 监视复杂类型
<script setup>
import { reactive, watch } from 'vue'// 表单对象
const obj = reactive({username: '',password: ''
})
// 监视 obj 的变化
watch(obj, (newVal, oldVal) => {console.log(newVal, oldVal)
})
</script>
<template><div><input type="text" v-model="obj.username" placeholder="请输⼊⽤⼾名" /><br /><br /><input type="text" v-model="obj.password" placeholder="请输⼊密码" /></div>
</template>

3. 总结

  1. watch的作⽤是?

​ 答: 监视响应式数据的变化, 当数据变了, 针对性的DOM操作或异步操作

五、案例-成绩管理

1. 效果

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2. 静态代码

<script setup>
import { ref } from 'vue'
// 成绩列表
const scoreList = ref([{ id: 19, subject: '语⽂', score: 94 },{ id: 27, subject: '数学', score: 59 },{ id: 12, subject: '英语', score: 92 }
])
</script><template><div class="score-case"><div class="table"><table><thead><tr><th>编号</th><th>科⽬</th><th>成绩</th><th>操作</th></tr></thead><tbody><tr><td>1</td><td>语⽂</td><td class="red">46</td><td><a href="#">删除</a></td></tr><tr><td>2</td><td>英语</td><td>80</td><td><a href="#">删除</a></td></tr></tbody><tbody><tr><td colspan="5"><span class="none">暂⽆数据</span></td></tr></tbody><tfoot><tr><td colspan="5"><span>总分: 246</span><span style="margin-left: 50px">平均分: 79</span></td></tr></tfoot></table></div><form class="form"><div class="form-item"><div class="label">科⽬:</div><div class="input"><input type="text" placeholder="请输⼊科⽬" /></div></div><div class="form-item"><div class="label">分数:</div><div class="input"><input type="text" placeholder="请输⼊分数" /></div></div><div class="form-item"><div class="label"></div><div class="input"><button class="submit">添加</button></div></div></form></div>
</template>
<style>
.score-case {width: 1000px;margin: 50px auto;display: flex;
}.score-case .table {flex: 4;
}.score-case .table table {width: 100%;border-spacing: 0;border-top: 1px solid #ccc;border-left: 1px solid #ccc;
}.score-case .table table th {background: #f5f5f5;
}.score-case .table table tr:hover td {background: #f5f5f5;
}.score-case .table table td,
.score-case .table table th {border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;text-align: center;padding: 10px;
}.score-case .table table td.red,
.score-case .table table th.red {color: red;
}.score-case .table .none {height: 100px;line-height: 100px;color: #999;
}.score-case .form {flex: 1;padding: 20px;
}.score-case .form .form-item {display: flex;margin-bottom: 20px;align-items: center;
}.score-case .form .form-item .label {width: 60px;text-align: right;font-size: 14px;
}.score-case .form .form-item .input {flex: 1;
}.score-case .form .form-item input,
.score-case .form .form-item select {appearance: none;outline: none;border: 1px solid #ccc;width: 200px;height: 40px;box-sizing: border-box;padding: 10px;color: #666;
}.score-case .form .form-item input::placeholder {color: #666;
}.score-case .form .form-item .cancel,
.score-case .form .form-item .submit {appearance: none;outline: none;border: 1px solid #ccc;border-radius: 4px;padding: 4px 10px;margin-right: 10px;font-size: 12px;background: #ccc;
}.score-case .form .form-item .submit {border-color: #069;background: #069;color: #fff;
}
</style>

3. 功能描述

3.1 渲染功能

3.2 添加功能

3.3 删除功能

3.4 统计总分,求平均分

代码实现

<script setup>
import { ref, computed,watch } from 'vue'const SCORE_LIST_KEY = 'scoreList'// 成绩列表
const scoreList = ref(JSON.parse(localStorage.getItem(SCORE_LIST_KEY)) || [{ id: 19, subject: '语⽂', score: 94 },{ id: 27, subject: '数学', score: 59 },{ id: 12, subject: '英语', score: 92 }
])// 总分
const total = computed(() => {return scoreList.value.reduce((total, item) => total + item.score, 0)
})// 平均分
const average = computed(() => {if (scoreList.value.length === 0) return 0.00return (total.value / scoreList.value.length).toFixed(2)
})// 删除指定索引的成绩
const deleteByIndex = (index) => {if (index < 0 || index >= scoreList.value.length) returnif (confirm('确定删除吗?')) {scoreList.value.splice(index, 1)}
}// 添加成绩
const scoreObj = ref({ subject: '', score: '' })
const addScore = () => {if (!scoreObj.value.subject || !scoreObj.value.score) {alert('请填写科目和分数')return}scoreList.value.push({id: Date.now(),subject: scoreObj.value.subject,score: Number(scoreObj.value.score)})scoreObj.value.subject = ''scoreObj.value.score = ''
}// 监听 scoreList 的变化, 存储到 localStorage, 持久化存储
watch(scoreList, (newVal) => {localStorage.setItem(SCORE_LIST_KEY, JSON.stringify(newVal))
}, { deep: true })</script><template><div class="score-case"><!-- 表格部分 --><div class="table"><table><!-- 表头部分, 不需要变动 --><thead><tr><th>编号</th><th>科⽬</th><th>成绩</th><th>操作</th></tr></thead><!-- 内容部分, 需要依据 scoreList 动态改变 --><tbody v-for="(score, index) in scoreList" :key="score.id"><tr><td>{{ index + 1 }}</td><td>{{ score.subject }}</td><td :class="{ red: score.score < 60 }">{{ score.score }}</td><td><a href="#" @click="deleteByIndex(index)">删除</a></td></tr></tbody><!-- 底部部分, 不需要变动 --><tbody><tr><td colspan="5"><span class="none">暂⽆数据</span></td></tr></tbody><!-- 尾部部分, 需要计算属性补充 --><tfoot><tr><td colspan="5"><span>总分: {{ total }}</span><span style="margin-left: 50px">平均分: {{ average }}</span></td></tr></tfoot></table></div><!-- 表单部分 --><form class="form"><div class="form-item"><div class="label">科⽬:</div><div class="input"><input type="text" placeholder="请输⼊科⽬" v-model="scoreObj.subject" /></div></div><div class="form-item"><div class="label">分数:</div><div class="input"><input type="text" placeholder="请输⼊分数" v-model="scoreObj.score" /></div></div><div class="form-item"><div class="label"></div><div class="input"><button class="submit" @click="addScore()">添加</button></div></div></form></div>
</template>
<style>
.score-case {width: 1000px;margin: 50px auto;display: flex;
}.score-case .table {flex: 4;
}.score-case .table table {width: 100%;border-spacing: 0;border-top: 1px solid #ccc;border-left: 1px solid #ccc;
}.score-case .table table th {background: #f5f5f5;
}.score-case .table table tr:hover td {background: #f5f5f5;
}.score-case .table table td,
.score-case .table table th {border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;text-align: center;padding: 10px;
}.score-case .table table td.red,
.score-case .table table th.red {color: red;
}.score-case .table .none {height: 100px;line-height: 100px;color: #999;
}.score-case .form {flex: 1;padding: 20px;
}.score-case .form .form-item {display: flex;margin-bottom: 20px;align-items: center;
}.score-case .form .form-item .label {width: 60px;text-align: right;font-size: 14px;
}.score-case .form .form-item .input {flex: 1;
}.score-case .form .form-item input,
.score-case .form .form-item select {appearance: none;outline: none;border: 1px solid #ccc;width: 200px;height: 40px;box-sizing: border-box;padding: 10px;color: #666;
}.score-case .form .form-item input::placeholder {color: #666;
}.score-case .form .form-item .cancel,
.score-case .form .form-item .submit {appearance: none;outline: none;border: 1px solid #ccc;border-radius: 4px;padding: 4px 10px;margin-right: 10px;font-size: 12px;background: #ccc;
}.score-case .form .form-item .submit {border-color: #069;background: #069;color: #fff;
}
</style>

width: 100%;
border-spacing: 0;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
}

.score-case .table table th {
background: #f5f5f5;
}

.score-case .table table tr:hover td {
background: #f5f5f5;
}

.score-case .table table td,
.score-case .table table th {
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
text-align: center;
padding: 10px;
}

.score-case .table table td.red,
.score-case .table table th.red {
color: red;
}

.score-case .table .none {
height: 100px;
line-height: 100px;
color: #999;
}

.score-case .form {
flex: 1;
padding: 20px;
}

.score-case .form .form-item {
display: flex;
margin-bottom: 20px;
align-items: center;
}

.score-case .form .form-item .label {
width: 60px;
text-align: right;
font-size: 14px;
}

.score-case .form .form-item .input {
flex: 1;
}

.score-case .form .form-item input,
.score-case .form .form-item select {
appearance: none;
outline: none;
border: 1px solid #ccc;
width: 200px;
height: 40px;
box-sizing: border-box;
padding: 10px;
color: #666;
}

.score-case .form .form-item input::placeholder {
color: #666;
}

.score-case .form .form-item .cancel,
.score-case .form .form-item .submit {
appearance: none;
outline: none;
border: 1px solid #ccc;
border-radius: 4px;
padding: 4px 10px;
margin-right: 10px;
font-size: 12px;
background: #ccc;
}

.score-case .form .form-item .submit {
border-color: #069;
background: #069;
color: #fff;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/450892.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何看待阿里通义千问团队发布Qwen2.5 MATH,效果怎么样,这是中国的草莓吗?

Qwen2.5-Math的发布标志着在数学问题解决领域的一个重要进展。这个由阿里通义千问团队发布的模型系列&#xff0c;通过结合Chain-of-Thought (CoT)和Tool-integrated Reasoning (TIR)技术&#xff0c;提升了对中英文数学问题的解决能力。Qwen2.5-Math系列包括基础模型和经过指令…

CentOS 7 yum失效的解决办法

文章目录 一、CentOS 7停止维护导致yum失效的解决办法解决方案 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、CentOS 7停止维护导致yum失效的解决办法 020 年&#xff0c;CentOS 项目与红帽联合宣布将全部投资转向 CentOS Stream&#xff0c;这是…

个人健康系统|个人健康数据管理系统|基于小程序+java的个人健康数据管理系统设计与实现(源码+数据库+文档)

个人健康数据管理系统 目录 基于小程序java的个人健康数据管理系统设计与实现 一、前言 二、系统功能设计 三、系统实现 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#xff1a;✌️大厂码农|毕设布道师…

C#学习笔记(一)

C#学习笔记&#xff08;一&#xff09; 简介第一章 上位机开发环境之 VS 使用和.NET 平台基础一、安装软件二、创建项目三、第一个Hello world四、解决方案与项目五、Debug 和 Release 的区别六、代码的生产过程七、CLR的其它功能 简介 C# .NET工控上位机开发 在工控领域&…

VMware虚拟机连不上网络,但VMware网络服务和网络适配器均正常

此教程适用于VMware虚拟机连不上网络&#xff0c;但检查VMware网络服务和网络适配器均正常的场景&#xff0c;遇到问题的为凝思Linux6.0.80系统&#xff0c;其他系统遇到同样问题应该也可以试试 问题描述&#xff1a; 使用凝思Linux系统&#xff0c;配置了两个网卡&#xff1…

web API基础

作用和分类 作用: 就是使用 JS 去操作 html 和浏览器 分类&#xff1a; DOM (文档对象模型)、 BOM &#xff08;浏览器对象模型&#xff09; 什么是DOM DOM (Document Object Model) 译为文档对象模型&#xff0c;是 HTML 和 XML 文档的编程接口。 HTML DOM 定义了访问和操作 …

2024 OSCAR|《开源体系建设路径模式洞察与建议》即将发布

近年来&#xff0c;开源体系建设受到高度重视&#xff0c;国家软件发展战略和“十四五”规划纲要均对开源作出重要部署&#xff0c;为我国开源体系建设和发展指明了方向。9月25日&#xff0c;工业和信息化部党组书记、部长金壮指出要加强开源体系建设&#xff0c;助推产业高质量…

数据结构——树和森林

目录 树的存储结构 1、双亲表示法 2、孩子链表 3、孩子兄弟表示法 树与二叉树的转换 将树转换为二叉树 将二叉树转换为树 森林与二叉树的转化 森林转换成二叉树 二叉树转换为森林 树和森林的遍历 1、 树的遍历&#xff08;三种方式&#xff09; 2、森林的遍历 树的存…

Zico 2 靶机 - 详细流程

✨ 准备工作 靶机 && kali 环境要求 机器名网络配置靶机Zico 2NAT 模式攻击机kaliNAT 模式 靶机下载链接&#xff1a;zico2: 1 ~ VulnHub 打开 VMware&#xff0c;将 zico2.ova 拖拽到 VMware 中 设置 虚拟机名称(A) - 存储路径(P)- 导入 若是&#xff0c;…

Android复杂问题分析工具bugreportz详解

文章目录 bugreportz详细介绍功能与作用使用方法生成详细报告检查进度bugreportz 的优势分析报告 如何分析1. 解压 ZIP 文件2. 分析主要文件2.1 bugreport.txt2.2 logcat.txt2.3 kernel.log / last_kmsg2.4 events.log2.5 traces.txt2.6 dumpstate_board.txt 3. 工具支持4. 重点…

《深度学习》OpenCV 光流估计 原理、案例解析

目录 一、光流估计 1、什么是光流估计 2、原理 3、光流估计算法 1&#xff09;基于局部方法 2&#xff09;和基于全局方法 4、光流估计的前提 1&#xff09;亮度恒定 2&#xff09;小运动 3&#xff09;空间一致 二、案例实现 1、读取视频 2、特征检测 3、处理每…

案例实践 | 以长安链为坚实底层,江海链助力南通民政打造慈善应用标杆

案例名称-江海链 ■ 实施单位 中国移动通信集团江苏有限公司南通分公司、中国移动通信集团江苏有限公司 ■ 业主单位 江苏省南通市民政局 ■ 上线时间 2023年12月 ■ 用户群体 南通市民政局、南通慈善总会等慈善组织及全市民众 ■ 用户规模 全市近30家慈善组织&#…

【RoadRunner】自动驾驶模拟3D场景构建 | 软件简介与视角控制

&#x1f4af; 欢迎光临清流君的博客小天地&#xff0c;这里是我分享技术与心得的温馨角落 &#x1f4af; &#x1f525; 个人主页:【清流君】&#x1f525; &#x1f4da; 系列专栏: 运动控制 | 决策规划 | 机器人数值优化 &#x1f4da; &#x1f31f;始终保持好奇心&…

秋招突击——8/6——万得数据面试总结

文章目录 引言正文面经整理一1、讲一下java的多态&#xff0c;重载&#xff0c;重写的概念&#xff0c;区别2、说一下Java的数组&#xff0c;链表的结构&#xff0c;优缺点3、创建java线程的方式有哪些&#xff0c;具体说说4、创建线程池呢、每个参数的意义5、通过那几种方式保…

普通索引和唯一索引,应该怎么选择?

普通索引和唯一索引&#xff0c;应该怎么选择&#xff1f; 普通索引&#xff0c;不能保证字段的唯一性&#xff0c;所以普通索引会比唯一索引要多N次判断&#xff0c;比如判断下一条记录是否和目标相同。 InnoDB的数据其实是按页来取的&#xff0c;也就是说要拿到某一个数据&a…

AndroidStudio配置MQTT连接云平台EMQX

引言 本篇博客主要介绍mqtt和emqx配置连接实现数据收发&#xff0c;我会从基础的本机连接到手机和本机连接再到手机实现mqtt连接云平台&#xff0c;大家可以根据需要自行选择观看&#xff08;后面两个教程都建立在mqtt和emqx下载完成的基础上&#xff0c;若没有下载完成&#x…

黎巴嫩爆炸事件分析:硬件国产自主可控的意义

黎巴嫩近期发生的寻呼机爆炸事件&#xff0c;不仅对当地社会造成了冲击&#xff0c;也在全球范围内引发了对通信设备安全性的深刻反思。这一事件凸显了在全球化背景下&#xff0c;电子产品安全性的重要性&#xff0c;以及自主可控技术在保障国家安全和公共安全中的关键作用。 …

DataWhale10月动手实践——Bot应用开发task02学习笔记

一、Prompt工程 之前有接触过一些Prompt工程的内容&#xff0c;也做过一些简单的应用&#xff0c;比如使用langchain和Openai库自己搭建了一个助手项目&#xff0c;但是还从未关注过在智能体方面的Prompt。在这篇博客中&#xff0c;我会将我之前掌握的和在本次任务学习中掌握的…

【C++】在Windows中使用Boost库——实现TCP、UDP通信

目录 一、编译Boost库 二、TCP服务端 三、TCP客户端 四、UDP连接 一、编译Boost库 1. 先去官网下载Boost库源码 2. 点击下载最新的版本 下载Windows环境的压缩包&#xff0c;然后解压 3. 在解压后的目录路径下找到“bootstrap.bat” 打开控制台&#xff0c;在“bootstrap.…

ROS2 常用工具之Launch -- 启动管理工具

基于上一篇的action代码上继续&#xff0c;链接如上&#xff1a; ROS2 通信三大件之动作 -- Action-CSDN博客 参考链接&#xff1a;ROS2——教你写新版Launch文件 | 范子琦的博客 1、创建文件 src/action_moudle/launch/action_launch.launch.py 路径下创建文件action_lau…