学习笔记——Vue

isDaHua 2023-03-28 原文

2022-10-26

Vue属性的基本操作

一、绑定

（1）单向绑定

关键词：v-bind

用法：v-bind:原属性名="数据模型的key值"

例如：v-bind:href="username"（其中"username"中的说明放在“script”说明中）

简写：可以省略“v-bind”，但是不能省略冒号。

（2）双向绑定

关键词：v-model

用法：v-model:原属性名="数据模型的key值"

例如：v-model:value="username"

简写：可以省略“:value”,结果为：v-model="username"，注意此处双向绑定的属性值默认为“value”。

扩展：在双向绑定中，有一个“trim”函数，它可以用于删除字符串首尾的空格。使用的方式例如：v-model.trim="username"。常用在如果需要输入用户的名称时，可以取出首尾的空格。

----------

使用实例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="vue.js"></script>
 7 </head>
 8 <body>
 9     <div id="app">
10         <div>{{msg}}</div>
11         <p>{{msg}}</p>
12 <!--        单向绑定-->
13 <!--        <a v-bind:href="username">{{aMsg}}</a>-->
14 <!--        单向绑定的简写-->
15         <a :href="username">{{aMsg}}</a>
16 <!--        双向绑定-->
17 <!--        <input type="text" v-model:value="username"/><br/>-->
18 <!--        双向绑定的简写-->
19 <!--        <input type="text" v-model="username"/><br/>-->
20 <!--        去除字符串的首尾空格-->
21         <input type="text" v-model.trim="username"/><br/>
22         <input type="button" value="哈哈哈" @click="getValue"/>
23     </div>
24 
25 </body>
26 <script>
27     new Vue({
28         "el" : "#app",
29         "data":{
30             "msg":"div的内容123",
31             "aMsg":"点我",
32             "username":"admin "
33         },
34         "methods":{
35             "getValue": function(){
36                 alert(this.username);
37                 this.username = "root";
38             }
39         },
40     })
41 </script>
42 </html>

　　　　说明：“value” 表示在浏览器中运行时，显示在前端的。

二、条件渲染

作用：根据条件判断元素是否能够显示

分类：（1）v-if："true":是显示；“false”:是不显示。

　　（2）v-else：注意“v-if”与“v-else”中间是不能加其他标签，不然会阻断的。

　　（3）v-show：如果是不显示，是通过CSS样式隐藏的。

-----------

使用实例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="vue.js"></script>
 7     <style>
 8         .divs{
 9             border: 1px solid #ff0000;
10             width: 200px;
11             height: 200px;
12         }
13     </style>
14 </head>
15 <body>
16     <div id="app">
17         <div v-if="flag" class="divs">div1</div>
18 <!--        <div v-else="flag" class="divs">div2</div>-->
19         <div v-show="flag" class="divs">div3</div>
20         <input type="button" value="按钮" @click="changeDiv">
21     </div>
22     <script>
23         new Vue({
24             el:"#app",
25             data:{
26                 flag:true,
27             },
28             methods:{
29                 changeDiv:function(){
30                     this.flag = !this.flag;
31                 },
32             },
33         })
34     </script>
35 </body>
36 </html>

　　　　说明：注意第6行是导入vue脚本的。

mdash 笔记 span color rgba 前端开发

有关学习笔记——Vue的更多相关文章

LC滤波器设计学习笔记（一）滤波电路入门 - 2
目录前言滤波电路科普主要分类实际情况单位的概念常用评价参数函数型滤波器简单分析滤波电路构成低通滤波器RC低通滤波器RL低通滤波器高通滤波器RC高通滤波器RL高通滤波器部分摘自《LC滤波器设计与制作》，侵权删。前言最近需要学习放大电路和滤波电路，但是由于只在之前做音乐频谱分析仪的时候简单了解过一点点运放，所以也是相当从零开始学习了。滤波电路科普主要分类滤波器：主要是从不同频率的成分中提取出特定频率的信号。有源滤波器：由RC元件与运算放大器组成的滤波器。可滤除某一次或多次谐波，最普通易于采用的无源滤波器结构是将电感与电容串联，可对主要次谐波（3、5、7）构成低阻抗旁路。无源滤波器：无源滤波器，又称
CAN协议的学习与理解 - 2
最近在学习CAN，记录一下，也供大家参考交流。推荐几个我觉得很好的CAN学习，本文也是在看了他们的好文之后做的笔记首先是瑞萨的CAN入门，真的通透；秀！靠这篇我竟然2天理解了CAN协议！实战STM32F4CAN！原文链接：https://blog.csdn.net/XiaoXiaoPengBo/article/details/116206252CAN详解（小白教程）原文链接：https://blog.csdn.net/xwwwj/article/details/105372234一篇易懂的CAN通讯协议指南1一篇易懂的CAN通讯协议指南1-知乎(zhihu.com)视频推荐CAN总线个人知识总
深度学习部署：Windows安装pycocotools报错解决方法 - 2
深度学习部署：Windows安装pycocotools报错解决方法1.pycocotools库的简介2.pycocotools安装的坑3.解决办法更多Ai资讯：公主号AiCharm本系列是作者在跑一些深度学习实例时，遇到的各种各样的问题及解决办法，希望能够帮助到大家。ERROR:Commanderroredoutwithexitstatus1:'D:\Anaconda3\python.exe'-u-c'importsys,setuptools,tokenize;sys.argv[0]='"'"'C:\\Users\\46653\\AppData\\Local\\Temp\\pip-instal
计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU
ruby - 我正在学习编程并选择了 Ruby。我应该升级到 Ruby 1.9 吗？ - 2
我完全不是程序员，正在学习使用Ruby和Rails框架进行编程。我目前正在使用Ruby1.8.7和Rails3.0.3，但我想知道我是否应该升级到Ruby1.9，因为我真的没有任何升级的“遗留”成本。缺点是什么？我是否会遇到与普通gem的兼容性问题，或者甚至其他我不太了解甚至无法预料的问题？最佳答案你应该升级。不要坚持从1.8.7开始。如果您发现不支持1.9.2的gem，请避免使用它们(因为它们很可能不被维护)。如果您对gem是否兼容1.9.2有任何疑问，您可以在以下位置查看:http://www.railsplugins.or
ruby - 我如何学习 ruby 的正则表达式？ - 2
如何学习ruby的正则表达式？(对于假人) 最佳答案 http://www.rubular.com/在Ruby中使用正则表达式时是一个很棒的工具，因为它可以立即将结果可视化。关于ruby-我如何学习ruby的正则表达式？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/1881231/
深度学习12. CNN经典网络 VGG16 - 2
深度学习12.CNN经典网络VGG16一、简介1.VGG来源2.VGG分类3.不同模型的参数数量4.3x3卷积核的好处5.关于学习率调度6.批归一化二、VGG16层分析1.层划分2.参数展开过程图解3.参数传递示例4.VGG16各层参数数量三、代码分析1.VGG16模型定义2.训练3.测试一、简介1.VGG来源VGG（VisualGeometryGroup）是一个视觉几何组在2014年提出的深度卷积神经网络架构。VGG在2014年ImageNet图像分类竞赛亚军，定位竞赛冠军；VGG网络采用连续的小卷积核（3x3）和池化层构建深度神经网络，网络深度可以达到16层或19层，其中VGG16和VGG
机器学习——时间序列ARIMA模型(四)：自相关函数ACF和偏自相关函数PACF用于判断ARIMA模型中p、q参数取值 - 2
文章目录1、自相关函数ACF2、偏自相关函数PACF3、ARIMA(p,d,q)的阶数判断4、代码实现1、引入所需依赖2、数据读取与处理3、一阶差分与绘图4、ACF5、PACF1、自相关函数ACF自相关函数反映了同一序列在不同时序的取值之间的相关性。公式：ACF(k)=ρk=Cov(yt,yt−k)Var(yt)ACF(k)=\rho_{k}=\frac{Cov(y_{t},y_{t-k})}{Var(y_{t})}ACF(k)=ρk=Var(yt)Cov(yt,yt−k)其中分子用于求协方差矩阵，分母用于计算样本方差。求出的ACF值为[-1,1]。但对于一个平稳的AR模型，求出其滞
Unity Shader 学习笔记（5）Shader变体、Shader属性定义技巧、自定义材质面板 - 2
写在之前Shader变体、Shader属性定义技巧、自定义材质面板，这三个知识点任何一个单拿出来都是一套知识体系，不能一概而论，本文章目的在于将学习和实际工作中遇见的问题进行总结，类似于网络笔记之用，方便后续回顾查看，如有以偏概全、不祥不尽之处，还望海涵。1、Shader变体先看一段代码......Properties{ [KeywordEnum(on,off)]USL_USE_COL("IsUseColorMixTex?",int)=0 [Toggle(IS_RED_ON)]_IsRed("IsRed?",int)=0}......//中间省略，后续会有完整代码 #pragmamulti_c
(附源码)vue3.0＋.NET6实现聊天室(实时聊天SignalR) - 2
参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图：一.整体介绍　　介绍SignalR一种通讯模型Hub(中心模型，或者叫集线器模型)，调用这个模型写好的方法，去发送消息。　　内容有：　　　　①：Hub模型的方法介绍　　　　②：服务器端代码介绍　　　　③：前端vue3安装并调用后端方法　　　　④：聊天室样例整体流程：1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法前端通过，signalR内置方法.invoke() 去请求接口3、监听接受方法（渲染消息）通过new signalR.HubConnectionBuilder().on

学习笔记——Vue

有关学习笔记——Vue的更多相关文章

随机推荐