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

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启动&#xff01;&#xff01; 首先VIewModel将View和Model连接一起&#xff0c;Model的数据改变View的数据也变 使用Visual Studio Code 启动Vue需要vue.js插件和导入CDN(包) vue.js插件&#xff1a;CTRL shift x 在搜索栏搜 索vue.js安装即可 CDN&#xff1a; http…...

【学习笔记】[PA2021] Fiolki 2

Part 1 前置知识&#xff1a;LGV引理 摘抄自oi-wiki&#xff1a; L G V LGV LGV引理可以用来处理有向无环图上不相交路径计数等问题。 基本定义&#xff1a; w ( P ) w(P) w(P)表示 P P P这条路径上所有边的 边权之积 。&#xff08;路径计数时&#xff0c;可以将边权都设为…...

计算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.定义两个整型变量&#xff1b; 2.执行100次加法运算&#xff1b; 3.打印结果到控制台&#xff1b; 二、好…...

C++下OpenMP耗时统计

在C中&#xff0c;如果你使用OpenMP进行并行计算&#xff0c;你可以使用omp_get_wtime()函数来测量代码段的执行时间。这个函数返回一个double类型的值&#xff0c;表示从某一固定点到当前时间的秒数。因此&#xff0c;你可以在代码的开始和结束点分别调用这个函数&#xff0c;…...

PTA 函数题(C语言)-- 阶乘计算升级版

题目title&#xff1a; 阶乘计算升级版 题目作者&#xff1a; 陈越 浙江大学 本题要求实现一个打印非负整数阶乘的函数。 函数接口定义&#xff1a; void Print_Factorial ( const int N ); 其中N是用户传入的参数&#xff0c;其值不超过1000。如果N是非负整数&#…...

内网穿透入门

内网穿透 内网穿透&#xff08;英文&#xff1a;Port Forwarding&#xff09;是一种网络技术&#xff0c;用于将公共互联网&#xff08;外网&#xff09;的请求转发到私有局域网&#xff08;内网&#xff09;中的特定设备或服务。在许多情况下&#xff0c;设备或服务位于一个局…...

Pickle pyhton反序列化

参考文章 Python pickle反序列化浅析 Pickle包含四种方法 pickle.dump(obj, file) 将obj对象进行封存&#xff0c;即序列化&#xff0c;然后写入到file文件中 注:这里的file需要以wb打开(二进制可写模式) pickle.load(file) 将file这个文件进行解封&#xff0c;即反序列化 …...

动静分离技术

一、HAproxy 动静分离 1、概念&#xff1a; HAproxy 动静分离技术是一种用于优化 Web 服务器性能和提高用户体验的策略&#xff0c;它通过将动态内容和静态内容分别路由到不同的后端服务器来实现&#xff0c;减轻服务器负载&#xff0c;提高网站的响应速度。 动态内容包括由…...

STM32单片机智能小车一PWM方式实现小车调速和转向

目录 1. 电机模块开发 2. 让小车动起来 3. 串口控制小车方向 4. 如何进行小车PWM调速 5. PWM方式实现小车转向 1. 电机模块开发 L9110s概述 接通VCC&#xff0c;GND 模块电源指示灯亮&#xff0c; 以下资料来源官方&#xff0c;具体根据实际调试 IA1输入高电平&#xff…...

灰狼优化算法(GWO)python

目录 一、灰狼优化算法的python实现 二、灰狼优化算法与遗传算法的对比分析&#xff08;python&#xff09; 2.1 GWO1.py 2.2 GA1.py 2.3 GWO_vs_GA.py 2.4 运行结果 ​三、基于莱维飞行改进的灰狼优化算法的python实现 一、灰狼优化算法的python实现 import numpy as …...

项目知识点总结-住房图片信息添加-Excel导出

&#xff08;1&#xff09;住房信息添加 Controller&#xff1a; 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行业转动成长飞轮

企业服务领域&#xff0c;一直存在一种共识&#xff1a;做好很难&#xff0c;但一旦服务模式跑通了&#xff0c;得到了市场的认可&#xff0c;要滚起雪球就会事半功倍。 重资产、重运营的DaaS&#xff08;设备及服务&#xff09;赛道&#xff0c;是个非常典型的细分领域。在这…...

【protobuf】protobuf自定义数据格式,CMake编译C++文件读写自定义数据

protobuf自定义数据格式&#xff0c;CMake编译文件读写自定义数据 1.protobuf安装2.定义.proto文件3.编写main.cpp4.编写CMAkeLists配置文件5.运行 1.protobuf安装 protobuf库链接 2.定义.proto文件 新建一个Person.proto文件和一个Animal.proto文件&#xff0c;内容如下&…...

解决:http://localhost:8080 不在以下 request 合法域名列表中

在搭建资源服务器时&#xff0c;遇到了微信开发者工具中无法访问本地资源服务器的情况&#xff0c;报错如下&#xff1a; 参考一篇博文的方法&#xff0c;完美解决 【解决】http://localhost:8080 不在以下 request 合法域名列表中_localhost不在以下 request 合法域名列表中-…...

Linux普通用户提权(sudo)

文章目录 Linux普通用户提权&#xff08;sudo&#xff09;1、在sudoers文件添加普通用户2、测试 Linux普通用户提权&#xff08;sudo&#xff09; 1、在sudoers文件添加普通用户 正常来说&#xff0c;普通用户初始是不具备提权的能力的&#xff0c;比如执行sudo ls会出现报警告…...

链表指定节点的插入

向现有链表中插入结点&#xff0c;根据插入位置的不同&#xff0c;可分为以下 3 种情况&#xff1a; 插入到链表的头部&#xff0c;作为新的链表中第一个存有数据的结点&#xff08;又称为”首元结点”&#xff09;&#xff1b;插入到链表中某两个结点之间的位置&#xff1b;插…...

解决问题Conda:CondaValueError: Malformed version string ‘~’ : invalid character(s)

解决问题Conda&#xff1a;CondaValueError: Malformed version string ‘~’ : invalid character(s) 背景 今天使用Conda构建项目运行环境的时候报错&#xff1a;&#xff1a;CondaValueError: Malformed version string ‘~’ : invalid character(s) ##报错问题 在安装te…...

Sci Immunol丨Tim-3 适配器蛋白 Bat3 是耐受性树突状细胞

今天和大家分享一篇发表于2022年3月的文章&#xff0c;题目为“Tim-3 adapter protein Bat3 acts as an endogenous regulator of tolerogenic dendritic cell function”&#xff0c;发表在《Sci Immunol》杂志上。文章主要研究了Tim-3和其适配蛋白Bat3在调节免疫应答中的作用…...

天软特色因子看板(2023.10 第14期)

该因子看板跟踪天软特色因子A05005(近一月单笔流通金额占比(%)&#xff0c;该因子为近一个月单笔流通金额占比因子&#xff0c;用以刻画股票在收盘时&#xff0c;主力资金在总交易金额中所占的比重。 今日为该因子跟踪第14期&#xff0c;跟踪其在SW801160 (申万公用事业) 中的表…...

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

FastAPI 教程:从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

多模态大语言模型arxiv论文略读(108)

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...

android13 app的触摸问题定位分析流程

一、知识点 一般来说,触摸问题都是app层面出问题,我们可以在ViewRootImpl.java添加log的方式定位;如果是touchableRegion的计算问题,就会相对比较麻烦了,需要通过adb shell dumpsys input > input.log指令,且通过打印堆栈的方式,逐步定位问题,并找到修改方案。 问题…...