当前位置： 首页 > news >正文

【Vue3】2-13 : 章节总结

news 2026/2/7 16:13:36

本书目录：点击进入

一、总结内容

二、习题

2.1 【选择题】以下Vue指令中，哪些指令具备简写方式？

2.2 【编程题】以下Vue指令中，哪些指令具备简写方式？

＞  效果

＞  代码

一、总结内容

  • 了解核心思想，例如：MVVM设计模式、选项式API优势

  • 了解Vue3各个选项的用法，例如：data、methods、computed等

  • 掌握常见的指令：v-bind、v-on、v-if、v-for等

  • 掌握样式操作、表单操作等行为

  • 了解Vue3的生命周期钩子函数，及如何使用

二、习题

2.1 【选择题】以下Vue指令中，哪些指令具备简写方式？

        A：v-if
        B：v-bind
        C：v-model  
        D：v-on

参考答案：  BD  ( v-bind简写为  :    v-on简写为 @ )

2.2 【编程题】要求如下：

        1. 输入框中内容根据顿号进行分割
        2. 复选项选中添加水果名称到输入框中
        3. 复选框取消选中从输入框中删除水果名称
        4. 输入框可直接输入内容来联动复选框

＞  效果

＞  代码

<body>
<div id="app"><input type="text" v-model="fruitsInput"><br><input type="checkbox" v-model="fruits" value="西瓜">西瓜<br><input type="checkbox" v-model="fruits" value="苹果">苹果<br><input type="checkbox" v-model="fruits" value="哈密瓜">哈密瓜<br><input type="checkbox" v-model="fruits" value="芒果">芒果<br>
</div>
<script>let vm = Vue.createApp({data() {return {fruits: ['苹果', '芒果']}},computed: {fruitsInput: {set(val){this.fruits = val.split('、');},get(){return this.fruits.join('、');}}}}).mount("#app")
</script>
</body>

相关文章：

【Vue3】2-13 : 章节总结

本书目录&#xff1a;点击进入 一、总结内容 二、习题 2.1 【选择题】以下Vue指令中&#xff0c;哪些指令具备简写方式&#xff1f; 2.2 【编程题】以下Vue指令中&#xff0c;哪些指令具备简写方式&#xff1f; &#xff1e; 效果 &#xff1e; 代码 一、总结内容 了解核…...

编程日记 2024/1/18 16:51:20

前端学习路径

菜鸟感觉很多人不太知道菜鸟写的博客是一个可以跟着学习、一起深入理解的过程&#xff0c;其中包括了菜鸟从刚开始学习到后面重新学习&#xff0c;再到后面进入学框架等一系列学习过程、知识和感悟&#xff0c;所以菜鸟把自己的博客整理成一个目录提取出来&#xff0c;好让读者…...

编程日记 2024/1/18 16:50:19

算法--插值法

插值法是一种数学方法&#xff0c;主要用于通过已知的离散数据来估算未知值。常见的插值法有线性插值、最近邻插值、双线性插值和双三次插值。以下是其基本原理和应用&#xff1a; 线性插值&#xff1a;假设在两个已知数据点之间&#xff0c;数据的变化是线性的&#xff0c;因…...

编程日记 2024/1/18 16:46:14

uniapp写微信小程序实现电子签名

写电子签名一定要注意的是一切全部按照手机上的适配来&#xff0c;为啥这么说呢&#xff0c;因为你在微信开发者工具中调试的时候认为是好的&#xff0c;正常的非常nice,当你发布版本的时候你会发现问题出来了。我下边的写法你可以直接用很简单。就是要记住canvas的几个属性和用…...

编程日记 2024/1/18 16:44:12

使用 Categraf 采集 Nginx 指标

1. 前言 工作中需要监控 Nginx 的指标&#xff0c;选用的指标采集器是 Categraf&#xff0c;特此记录下&#xff0c;以备后用。 此文档并未详细记录详细的操作细节&#xff0c;只记录了大概的操作步骤&#xff0c;仅供参考。 2. 采集基础指标 2.1. 暴露 Nginx 自带的指标采…...

编程日记 2024/1/18 16:43:11

【Internet Protocol】ip介绍，如何组局域网实现远程桌面和文件共享

文章目录 1.何为“上网”1.1 定义1.2 为什么连了WiFi就能上网了&#xff1f; 2.ip2.1 什么是ip2.2 为什么区分广域网和局域网&#xff0c;ip的唯一性2.3 如何查看设备的ip2.4 什么叫"ping"2.5 区分是否两个ip是否在同一局域网2.5.1 最稳妥的方式&#xff1a;ip&m…...

编程日记 2024/1/18 16:41:07

Java 使用 EasyExcel 爬取数据

一、爬取数据的基本思路 分析要爬取数据的来源 1. 查找数据来源&#xff1a;浏览器按 F12 或右键单击“检查”打开开发者工具查看数据获取时的请求地址 2. 查看接口信息&#xff1a;复制请求地址直接到浏览器地址栏输入看能不能取到数据 3. 推荐安装插件&#xff1a;FeHelper&a…...

编程日记 2024/1/18 16:39:04

React 原理

函数式编程 纯函数 reducer 必须是一个纯函数&#xff0c;即没有副作用的函数&#xff0c;不修改输入值&#xff0c;相同的输入一定会有相同的输出不可变值 state 必须是不可变值&#xff0c;否则在 shouldComponentUpdate 中无法拿到更新前的值&#xff0c;无法做性能优化操作…...

编程日记 2024/1/18 16:37:01

java高并发系列 - 第4天:JMM相关的一些概念

JMM(java内存模型)&#xff0c;由于并发程序要比串行程序复杂很多&#xff0c;其中一个重要原因是并发程序中数据访问一致性和安全性将会受到严重挑战。如何保证一个线程可以看到正确的数据呢&#xff1f;这个问题看起来很白痴。对于串行程序来说&#xff0c;根本就是小菜一碟&…...

编程日记 2024/1/18 16:34:58

如何卸载旧版docker

环境&#xff1a; Docker1.13 centos7.6 问题描述&#xff1a; 如何卸载旧版docker 解决方案&#xff1a; 1.停止Docker服务。使用以下命令停止Docker服务&#xff1a; sudo service docker stop2.卸载Docker软件包。根据您的Linux发行版&#xff0c;使用适当的包管理器来…...

编程日记 2024/1/18 16:33:57

Wheeltec小车的开发实录（0）

配置静态ip&#xff08;可以联网&#xff09; 首先在你正常链接网络的时候打开“Connection Information”(我的是wifi&#xff0c;而且是手机热点&#xff0c;所以我手机就相当于一台路由器) 查看路由ip 观察到Default Route 是192.168.***.225这就是我手机的地址&#xff0…...

编程日记 2024/1/18 16:32:55

uniapp中uview组件库的NoticeBar 滚动通知 使用方法

目录 #平台差异说明 #基本使用 #配置主题 #配置图标 #配置滚动速度 #控制滚动的开始和暂停 #事件回调 #API #Props #Events 该组件用于滚动通告场景&#xff0c;有多种模式可供选择 #平台差异说明 AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序√√√√…...

编程日记 2024/1/18 16:31:54

蓝桥杯每日一题----货物摆放

题目 分析 上来一看&#xff0c;三个for循环&#xff0c;从1到n&#xff0c;寻找满足lwhn的个数&#xff0c;但是这样根本跑不出来答案&#xff0c;n太大了&#xff0c;1e15的级别&#xff0c;O&#xff08;n&#xff09;的时间复杂度都不行&#xff0c;更何况是O&#xff08;…...

编程日记 2024/1/18 16:30:51

（二十）Flask之上下文管理第一篇（粗糙缕一遍源码）

每篇前言&#xff1a; &#x1f3c6;&#x1f3c6;作者介绍&#xff1a;【孤寒者】—CSDN全栈领域优质创作者、HDZ核心组成员、华为云享专家Python全栈领域博主、CSDN原力计划作者 &#x1f525;&#x1f525;本文已收录于Flask框架从入门到实战专栏&#xff1a;《Flask框架从入…...

编程日记 2024/1/18 16:27:47

Tensorflow2.0笔记 - 基础数学运算

本笔记主要记录基于元素操作的,-,*,/,//,%,**,log,exp等运算&#xff0c;矩阵乘法运算&#xff0c;多维tensor乘法相关运算 import tensorflow as tf import numpy as nptf.__version__#element-wise运算&#xff0c;对应元素的,-,*,/,**,//,% tensor1 tf.fill([3,3], 4) ten…...

编程日记 2024/1/18 16:25:44

年底聚餐无压力，HUAWEI WATCH GT 4 助力体形管理和健康守护

过了腊八就是年&#xff0c;逢年过节聚餐频繁。在品味美食、享受亲情温馨的同时&#xff0c;你是否也在担心自己的健康与体形呢&#xff1f;华为WATCH GT 4搭载心率监测、血氧检测和减脂塑形等功能&#xff0c;让你尽情享受美食的同时保持健康。 华为WATCH GT 4的心率监测功能…...

编程日记 2024/1/18 16:23:42

Tomcat Notes: URL Mapping

This is a personal study notes of Apache Tomcat. Below are main reference material. - YouTube Apache Tomcat Full Tutorial&#xff0c;owed by Alpha Brains Courses. https://www.youtube.com/watch?vrElJIPRw5iM&t801s 1、URL Mapping To Resources1.1、What w…...

编程日记 2024/1/18 16:22:41

【JVM】JVM概述

JVM概述 基本介绍 JVM&#xff1a;全称 Java Virtual Machine&#xff0c;即 Java 虚拟机&#xff0c;一种规范&#xff0c;本身是一个虚拟计算机&#xff0c;直接和操作系统进行交互&#xff0c;与硬件不直接交互&#xff0c;而操作系统可以帮我们完成和硬件进行交互的工作特…...

编程日记 2024/1/18 16:18:36

【2023开发组二等奖】湖南省国土空间规划双评价系统

作品介绍 1 需求分析 1.1 背景与意义 在我国辽阔的国土空间中，各地区的地形地势、自然条件和资源环境禀赋存在显著差异。然而，随着人口增长和城市化进程加快，高强度的不合理开发和产业布局广泛分布，使得部分地区的经济社会发展规模超过了资源环境的承载能力。因此，执行主…...

编程日记 2024/1/18 16:17:35

Flutter为什么不需要子线程——Dart IO源码剖析（上）

Dart IO 源码剖析 许多Flutter新手&#xff0c;特别是安卓、iOS原生开发转做Flutter的小伙伴&#xff0c;一直对Flutter 单线程模型开发APP倍感不解&#xff0c;他们总是喜欢本能的把网络请求、文件读写放到一个单独线程去做&#xff0c;因为“耗时操作会阻塞UI线程嘛”。于是…...

编程日记 2024/1/18 16:13:30

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

编程新知 2026/2/6 12:05:53

React Native 导航系统实战（React Navigation）

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

编程新知 2025/10/15 5:04:46

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2026/1/31 2:37:22

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

编程新知 2026/2/6 9:48:02

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

编程新知 2025/9/18 1:39:03

网络编程（UDP编程）

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

编程新知 2026/2/4 17:31:44

DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

编程新知 2025/9/24 13:35:36

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

编程新知 2025/9/24 3:05:06

AI病理诊断七剑下天山，医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

编程新知 2026/2/6 20:53:34

Linux离线（zip方式）安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

编程新知 2025/11/23 23:50:53