HTML简单实现v-if与v-for与v-model
Vue启动!!
-
首先VIewModel将View和Model连接一起,Model的数据改变View的数据也变
-
使用Visual Studio Code
-
启动Vue需要vue.js插件和导入CDN(包)
-
vue.js插件:CTRL + shift + x 在搜索栏搜
-
索vue.js安装即可
-
CDN: https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js
-
VS创建一个.html的文件
-
<div id="app">{{message}}</div><script>let vn = new Vue ({el: "#app",//el为元素的意思,选取id选择器//data更改数据data: {message: "Vue启动"}});</script> -
< div>< /div>块为view层(模板)
-
< script>< /script>块为Model层(数据)
-
ViewModel的体现:在浏览器的控制面板(Console),输入
vn.massage = "原神启动"ViewModle的双向绑定,网页随机刷新。


-
bind等被称为指令,指令前面有前缀v-,表示Vue的特殊特性,该指令的意思是: 将元素节点的title特性和Vue的实列massage属性统一起来
vue的循序结构
-
if的条件判断
-
-
<div id="app"><h1 v-if="type==='A'">A</h1><h1 v-else-if="type==='B'">B</h1><h1 v-else-if="type==='D'">D</h1><h1 v-else>C</h1></div><script>let vm = new Vue ({el: "#app",data: {type: 'A'}});</script> -
for循环语句,与foreach()结构相似

-
输入的数据框中[ { } , { } , { } ]用于输入多组数据
-
v-model指令在表单< input>,< textarea>,< select>在元素上创建双向数据绑定,它赋值监听用户输入事件来更新数据,
-
<div id="app">//输入的文本: <textarea v-model = "message"/>{{message}}//输入的文本: <textarea name="" cols="20" rows="10" v-model="message"></textarea>{{message}}输入的文本: <input type="text" v-model = "message">{{message}}//{{message}}用于输出用户看到的数据。其数据随文本框数据的改变而改变</div><script>let vm = new Vue({el: "#app",data: {message: "123"}});</script>以下案例用v-model指令对事件进行监听
-
<div id="app">输入的文本: <input type="radio" name="sex" value="男" v-model="xiaoming">男<input type="radio" name="sex" value="女" v-model="xiaoming">女//{{message}}用于输出用户看到的数据。其数据随文本框数据的改变而改变<p>选中了谁:{{xiaoming}}</p>/*选择框:<select v-model="select"><option value="disabled">--请选择--</option><option>A</option><option>B</option><option>C</option></select> */</div><script>let vm = new Vue({el: "#app",data: {xiaoming: "123"//select: ""}});</script>
相关文章:
HTML简单实现v-if与v-for与v-model
Vue启动!! 首先VIewModel将View和Model连接一起,Model的数据改变View的数据也变 使用Visual Studio Code 启动Vue需要vue.js插件和导入CDN(包) vue.js插件:CTRL shift x 在搜索栏搜 索vue.js安装即可 CDN: http…...
【学习笔记】[PA2021] Fiolki 2
Part 1 前置知识:LGV引理 摘抄自oi-wiki: L G V LGV LGV引理可以用来处理有向无环图上不相交路径计数等问题。 基本定义: w ( P ) w(P) w(P)表示 P P P这条路径上所有边的 边权之积 。(路径计数时,可以将边权都设为…...
计算1到100的和
一、不好的写法 public static void main(String[] args) {int sum 0;int n 100;for (int i 1; i < n; i) {sum i;}System.out.println("sum" sum);}1.定义两个整型变量; 2.执行100次加法运算; 3.打印结果到控制台; 二、好…...
C++下OpenMP耗时统计
在C中,如果你使用OpenMP进行并行计算,你可以使用omp_get_wtime()函数来测量代码段的执行时间。这个函数返回一个double类型的值,表示从某一固定点到当前时间的秒数。因此,你可以在代码的开始和结束点分别调用这个函数,…...
PTA 函数题(C语言)-- 阶乘计算升级版
题目title: 阶乘计算升级版 题目作者: 陈越 浙江大学 本题要求实现一个打印非负整数阶乘的函数。 函数接口定义: void Print_Factorial ( const int N ); 其中N是用户传入的参数,其值不超过1000。如果N是非负整数&#…...
内网穿透入门
内网穿透 内网穿透(英文:Port Forwarding)是一种网络技术,用于将公共互联网(外网)的请求转发到私有局域网(内网)中的特定设备或服务。在许多情况下,设备或服务位于一个局…...
Pickle pyhton反序列化
参考文章 Python pickle反序列化浅析 Pickle包含四种方法 pickle.dump(obj, file) 将obj对象进行封存,即序列化,然后写入到file文件中 注:这里的file需要以wb打开(二进制可写模式) pickle.load(file) 将file这个文件进行解封,即反序列化 …...
动静分离技术
一、HAproxy 动静分离 1、概念: HAproxy 动静分离技术是一种用于优化 Web 服务器性能和提高用户体验的策略,它通过将动态内容和静态内容分别路由到不同的后端服务器来实现,减轻服务器负载,提高网站的响应速度。 动态内容包括由…...
STM32单片机智能小车一PWM方式实现小车调速和转向
目录 1. 电机模块开发 2. 让小车动起来 3. 串口控制小车方向 4. 如何进行小车PWM调速 5. PWM方式实现小车转向 1. 电机模块开发 L9110s概述 接通VCC,GND 模块电源指示灯亮, 以下资料来源官方,具体根据实际调试 IA1输入高电平ÿ…...
灰狼优化算法(GWO)python
目录 一、灰狼优化算法的python实现 二、灰狼优化算法与遗传算法的对比分析(python) 2.1 GWO1.py 2.2 GA1.py 2.3 GWO_vs_GA.py 2.4 运行结果 三、基于莱维飞行改进的灰狼优化算法的python实现 一、灰狼优化算法的python实现 import numpy as …...
项目知识点总结-住房图片信息添加-Excel导出
(1)住房信息添加 Controller: RequestMapping("/add")public String add(Home home, Model model) throws IOException{String sqlPath null;//定义文件保存的本地路径String localPath"D:\\AnZhuang\\Java项目\\选题\\Xin-…...
第三届iEnglish全国ETP大赛决赛即将启动
如今,寓教于乐的学习方式越来越受到家长和孩子的欢迎,“玩中学”成为一种既能培养兴趣又有助于孩子成长的学习趋势。 以“玩转英语,用iEnglish”为活动主题的第三届全国ETP大赛即将于本周五(11月3日)迎来总决赛的抽签仪式。据主办方iEnglish智能英语学习解决方案相关负责人称,…...
创造产业链协同优势后,凌雄科技在DaaS行业转动成长飞轮
企业服务领域,一直存在一种共识:做好很难,但一旦服务模式跑通了,得到了市场的认可,要滚起雪球就会事半功倍。 重资产、重运营的DaaS(设备及服务)赛道,是个非常典型的细分领域。在这…...
【protobuf】protobuf自定义数据格式,CMake编译C++文件读写自定义数据
protobuf自定义数据格式,CMake编译文件读写自定义数据 1.protobuf安装2.定义.proto文件3.编写main.cpp4.编写CMAkeLists配置文件5.运行 1.protobuf安装 protobuf库链接 2.定义.proto文件 新建一个Person.proto文件和一个Animal.proto文件,内容如下&…...
解决:http://localhost:8080 不在以下 request 合法域名列表中
在搭建资源服务器时,遇到了微信开发者工具中无法访问本地资源服务器的情况,报错如下: 参考一篇博文的方法,完美解决 【解决】http://localhost:8080 不在以下 request 合法域名列表中_localhost不在以下 request 合法域名列表中-…...
Linux普通用户提权(sudo)
文章目录 Linux普通用户提权(sudo)1、在sudoers文件添加普通用户2、测试 Linux普通用户提权(sudo) 1、在sudoers文件添加普通用户 正常来说,普通用户初始是不具备提权的能力的,比如执行sudo ls会出现报警告…...
链表指定节点的插入
向现有链表中插入结点,根据插入位置的不同,可分为以下 3 种情况: 插入到链表的头部,作为新的链表中第一个存有数据的结点(又称为”首元结点”);插入到链表中某两个结点之间的位置;插…...
解决问题Conda:CondaValueError: Malformed version string ‘~’ : invalid character(s)
解决问题Conda:CondaValueError: Malformed version string ‘~’ : invalid character(s) 背景 今天使用Conda构建项目运行环境的时候报错::CondaValueError: Malformed version string ‘~’ : invalid character(s) ##报错问题 在安装te…...
Sci Immunol丨Tim-3 适配器蛋白 Bat3 是耐受性树突状细胞
今天和大家分享一篇发表于2022年3月的文章,题目为“Tim-3 adapter protein Bat3 acts as an endogenous regulator of tolerogenic dendritic cell function”,发表在《Sci Immunol》杂志上。文章主要研究了Tim-3和其适配蛋白Bat3在调节免疫应答中的作用…...
天软特色因子看板(2023.10 第14期)
该因子看板跟踪天软特色因子A05005(近一月单笔流通金额占比(%),该因子为近一个月单笔流通金额占比因子,用以刻画股票在收盘时,主力资金在总交易金额中所占的比重。 今日为该因子跟踪第14期,跟踪其在SW801160 (申万公用事业) 中的表…...
智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql
智慧工地管理云平台系统,智慧工地全套源码,java版智慧工地源码,支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求,提供“平台网络终端”的整体解决方案,提供劳务管理、视频管理、智能监测、绿色施工、安全管…...
高频面试之3Zookeeper
高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个?3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制(过半机制࿰…...
django filter 统计数量 按属性去重
在Django中,如果你想要根据某个属性对查询集进行去重并统计数量,你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求: 方法1:使用annotate()和Count 假设你有一个模型Item,并且你想…...
定时器任务——若依源码分析
分析util包下面的工具类schedule utils: ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类,封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz,先构建任务的 JobD…...
376. Wiggle Subsequence
376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...
sqlserver 根据指定字符 解析拼接字符串
DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...
uniapp中使用aixos 报错
问题: 在uniapp中使用aixos,运行后报如下错误: AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...
学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2
每日一言 今天的每一份坚持,都是在为未来积攒底气。 案例:OLED显示一个A 这边观察到一个点,怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 : 如果代码里信号切换太快(比如 SDA 刚变,SCL 立刻变&#…...
Mysql8 忘记密码重置,以及问题解决
1.使用免密登录 找到配置MySQL文件,我的文件路径是/etc/mysql/my.cnf,有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...
Caliper 配置文件解析:fisco-bcos.json
config.yaml 文件 config.yaml 是 Caliper 的主配置文件,通常包含以下内容: test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...
