- 博客(33)
- 收藏
- 关注
RSS订阅原创 uni-app组件与生命周期
在demo1和demo2中调用这个组件，此时，demo1和demo2的页面是一摸一样的。尝试分别定义这两个页面，组件中有三个区域header、main、footer，我们要定义中间的main，就在main内放入一个标签，然后就可以去demo1和demo2的组件标签中定义，下面是demo1的代码，在组件标签内填写任意内容；接下来，尝试传递对象给组件：首先，要在组件中设置defineProps接受obj，并在template中渲染，然后在页面中script区域定义对象，并在template中调用。
2024-07-21 10:37:34
438
原创 watch和watchEffect监听的使用
计算属性允许我们声明性地计算衍生值。然而在有些情况下，我们需要在状态变化时执行一些“副作用”：例如更改 DOM，或是根据异步操作的结果去修改另一处的状态。
2024-07-16 08:41:56
393
原创 computed计算属性用法及方法对比
计算属性，其实就是把template中比较复杂的逻辑变量，放到了script里。模板中的插值表达式虽然方便，但当要写复杂逻辑时就会变得臃肿，难以维护，遇上复杂逻辑时，推荐使用计算属性来描述以响应式状态的复杂逻辑。可以看到，三组表达式一开始就被调用了三次，输入一次，会调用三次。
2024-07-13 12:44:50
337
原创 【小鸡案例】表单focus和blur事件用法
input中有2个属性，一个是focus获取焦点，一个是blur失去焦点。获取焦点就是我们点击输入框时输入框被选中；失去焦点即点击输入框以外的区域，今天就用这两种属性做一个点击输入框时的动画效果。
2024-07-08 23:05:57
188
原创 【购物车案例】for循环为什么使用key
成功实现删除，但注意看，在动画中，选中“摩托罗拉”，并将其删除后，“诺基亚”被选中了，这是因为没有key的情况下，Vue在数据项顺序改变时会复用错误的DOM元素，导致页面显示错误。要做出这样一个简陋的购物车界面。
2024-07-08 18:51:11
353
1
原创 v-for列表渲染
可以用template给它打包起来，这是一种包装器元素，在最终的渲染结果中并不会显示template。索引默认都是从0开始的，你要是想从1开始，就在插值表达式中加1就好了，例：{{index + 1}}后台会提示应该给每个v-for加上一个Key，这样做的目的是确保应用能够高效且稳定地运行。：同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。到这里，运行上没有问题，但其实后台会警告错误，注意这里不是报错。注意这里，渲染时要用item，而不是变量名。现在，报错提示没有了。
2024-07-07 15:17:37
365
原创 v-if条件渲染及v-show的选择
v-if为假，该元素就不会被渲染，也就是说不会占用资源；v-show为假，元素依然会被渲染，只是它是以display属性加载的，依然会占用资源。另外，v-show 不支持在 template元素上使用，也不能和 v-else 搭配使用。根据day变量的值，会渲染出不同的v-else-if内容，若day没有对应的值，则渲染条件else报错。v-if条件渲染，即在template中使用if-else逻辑表达式选择是否渲染某一变量。在这段代码中，shop变量为真，因此显示"京东"，否则显示"淘宝"。
2024-07-07 12:57:00
398
原创 原生事件监听及组件内置事件处理
Switch组件的@change属性内置了返回值（true or false)，可以通过switch组件来控制button按钮的loading属性。我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click=“handler” 或 @click=“handler”。：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。：一个指向组件上定义的方法的属性名或是路径。
2024-07-06 10:22:37
253
原创 class类和style内联样式的绑定
这里的绑定其实就是v-bind的绑定，如代码所示，div后面的引号就是v-bind，然后大括号将整个对象括起来，对象内包含了属性，属性后接的是变量，这个变量是定义在script中的，后通过这个变量，来控制属性，实现绑定。注意定义active时的格式，尤其是在使用动态绑定，要加上一个单引号，以表示它是字符串类型的类名，否则没法作用上的。如图所示，现在实现了两个类名共同作用于一个类名，且在两个类名定义相同属性的情况下，下方的属性会优先。尝试再添加一个类名，也就是说，用两个类名来控制盒子。
2024-07-05 18:29:18
599
1
原创 V-bind指令配合图片轮播案例
效果如下，因为i一直在增加，数组中只有4个图片，所以到后面就没有图片显示了。接下来，我们做一个小案例。这里要说明的是，在实际应用中“v-bind:”可以简写为“:”如图所示，现在就只有这一张图。按钮停止加载动画了，成功。现在图片被调用过来了。
2024-07-03 18:27:39
239
原创 使用ref定义响应式数据变量
使用 Ref 可以方便地创建和管理Vue组件中的响应式数据。例如，如果你有一个计数器组件，你可以使用 Ref 来创建一个响应式的计数器变量，然后在组件内部或外部修改这个变量的值，而不需要手动触发视图更新。可以看到，页面的数字是没有发生变化的，但控制台里正常在计数。这样，说明定义的变量，并不是响应式的，该如何定义一个响应式的变量？
2024-07-03 13:13:55
281
原创 常用的表达组件button和input
首先要保证电脑和手机都连接在一个wifi下，然后去Uniapp日志里查看运行编译时的前几行代码，前者是本地调试码，后面的IP地址输入到手机上，就可以直接预览了。有时候网页有文本必须要输入，当用户未输入文本时，按钮就处于禁用状态。默认是一个很大的白色按钮，用size属性可以让它变小点儿，配合Type属性，可以改变按钮的颜色。用户在网页提交信息，当信息正在提交时，可以呈现给用户这个状态。可以看到，当我们点击文本框时，数字键盘会自动跳出来，且仅能输入数字。可以看到，输入到9时，就无法再输入了。
2024-07-02 18:32:29
757
原创 navigator路由与页面跳转
这里演示一下open-type的reLaunch属性，即关闭所有页面，打开到应用内的某个页面。刚刚进行跳转时，左上方是有一个返回按钮的，说明跳转前的页面没有被关闭。通过跳转方式属性，可以设置页面跳转后，关闭跳转前的页面等操作。关闭当前页面，返回上一页面或多级页面。成功跳转至demo页面，并且在左上角有一个返回按钮，点击后会回到跳转前的页面，这是系统默认的设置。可以看到，这次跳转后，左上角的返回按钮消失了，说明跳转前页面被关闭了。先创建一个新页面demo1，用于跳转，现在有两个页面了。
2024-07-01 12:12:14
287
原创 image媒体组件属性配合swiper轮播
aspectFill，保持纵横比缩放图片，只保证图片的短边能完全显示出来。图片是存放在static文件夹中的，如需导入图片，右键static—在外部资源管理器打开，后将图片复制进文件夹即可。如图可见，图片被拉伸了，这是因为系统会默认给图片设置一个尺寸，如对图片尺寸有要求，需要在插入后手动设置图片尺寸。mode属性，就是图片裁剪、缩放的模式，这里简单说2种mode属性：aspectFit和aspectFill。可以看到，图片恢复了原宽高比，HeightFix属性同理，不再做演示。
2024-06-30 22:07:14
394
原创 Swiper滑块视图容器的用法
滑动容器视图(Swiper)和滚动容器视图(Scroll-View)的区别，滚动容器仅有一个内容区域，可自由滚动选择要显示的内容；滑动容器有多个区域，Swiper下的每个swiper-item是一个滑动切换区域，只能一屏一屏的切换，不能停留在2个滑动区域之间。3. 指示点颜色（indicator-color）、当前选中指示点颜色（indicator-active-color）。Swiper滑块视图容器。
2024-06-30 15:38:24
232
原创 scroll-view 可滚动视图区域组件
当一个盒子里的内容过多，无法全部显示时，使用scroll-view，可以实现区域滑动，手动滑动展示盒子内未显示全的内容。scroll-view的属性过多，这里只介绍最基本的2个：横向滑动与纵向滑动。盒子内默认是纵向排列，想要实现横向滑动，需要做一些设置。接下来设置横向滑动(scroll - x)首先，为View设置样式，把它们设置盒子。
2024-06-28 13:37:04
159
原创 View和Text常用视图容器组件
如动画所示，我们点击子元素，父元素的背景色也发生了变化，若不想让父元素背景色发生变化，我们可以使用hover-stop-propagation属性，现在我们为子元素加上hover-stop-propagation属性，如图。hover-stop-propagation，描述当子元素被父元素包含时，点击子元素时仅子元素展示动画，父元素不会展示动画。在style中，设置父元素大小略大于子元素，并为其设置不同的颜色，同时，也为动画设置不同颜色的背景。现在我们可以看到，点击子元素，父元素的背景已经不会发生变化了。
2024-06-27 20:47:04
355
原创 uniapp入门
1输入名称 2选中“创建同名目录” 3选择模板（默认选择第一个空页面模板即可） 4在pages.json中注册（必须选中） 5点击创建。path表示页面路径，style用于设置页面样式，style中的navigationBarTitleText表示页面标题。其中template代表结构（HTML）、script代表逻辑（JavaScript）、style代表样式（CSS）选中左侧文件目录里的pages文件夹，右键，选择新建页面。
2024-06-26 22:20:38
198
原创 打靶（Java）
小蓝非常喜欢玩FPS类游戏，最近他迷上了一款打靶游戏，已知总共会出现 n 个靶子，每次开枪如果打中了靶子则会得到 1 分，另外不论这次开枪打中与否，靶子都将消失，现在有 m 个靶子已经出现过（出现过的靶子不会再出现），现在小蓝已经得到了 X 分，小蓝想知道他是否有可能最终分数为 Y。输出一个字符串，若小蓝想最终分数有可能为 Y则输出 "Yes" ，否则输出 "No" (不带引号)。输入一行包含四个整数 n,m,X,Y(1≤m≤n≤10^6,0≤X≤m,0≤Y≤10^9)
2024-04-29 17:21:37
231
1
原创 ACCEPT（Java）
小马是一名算法竞赛爱好者，他认为算法竞赛中表示答案正确的单词 ACCEPT 能给他带来好运，碰巧今天英语课上他得到了一串由 n 个大写字母组成的字符串。对于每组测试数据，第一行给出一个整数 n(1≤n≤10^3)，表示字符串的长度，下一行为对应的字符串，字符串仅由大写字母构成。//若字符串第1个字母为A，则a[65]++统计A、C、E、P、T这5个字母出现的次数，其中C的次数要除以二，然后找出它们中出现最少次数的值，即为结果。本题包含多组测试数据，第一行给出一个整数 T(1≤T≤10^3)，表示数据组数。
2024-04-28 23:10:03
348
原创 小苯的排序疑惑（Java）
选择的区间长度严格意义上要小于数组长度n，所以我们能选择操作的区间长度最多只能是n - 1，这意味着数组的a[0]或者a[n - 1]，我们无法去操作它。在这种情况下，要保证操作执行完后，数组a是非降序排列，只有当a[0]是最小值，或a[n - 1]是最大值时，才能实现。本题有多组测试用例。if(a[0] == min || a[n - 1]== max){ //排序后，还是a[0]最小或a[n-1]最大。换句话说，操作执行完后，区间中的值将满足：a[l]≤a[l+1]≤a[l+2]≤...≤a[r]。
2024-04-26 10:30:19
611
3
原创 伊甸之花（Java）
根据题意，将数组内所有数 +1 或者 -1 即可得到相似的曲子b。我们只要判断，在什么情况下数组即不能+1也不能-1。已知有1~m个调，所以数组内即有1，也有m，则无法得到相似的曲子。//共有m个音符（1 ~ m）int n = sc.nextInt();//这首曲子n个音符。
2024-04-23 19:16:15
564
原创 Bingbong的化学世界（Java）
接着，通过分析每个结构图中的独特元素和它们的排列特征，确定其独有的属性。举例来说，如果一个分子结构图中位于数组索引[0][3]的元素为'|'，同时位于[5][3]的元素为'.'，则根据这些特定的数组位置和相应的元素特征，我们可以判定该结构图代表了一个m型的分子构型。为了能更好的了解苯环,BingbongBingbongBingbong现在需要精确的判断给定的分子结构图为哪种类型的苯环二元取代物，请您帮帮他。一个字符,'m,o,p'中的其中一种,表示给定的分子结构式属于哪种苯环二元取代物。
2024-04-22 17:02:36
742
1
原创 勇气获得机（Java）
根据题目描述，初始勇气值是0，如果当前勇气值为x，按下N按钮勇气值变为2*x+1(奇数)，按下G按钮勇气值变为2*x+2(偶数)。勇气值过高也会膨胀,所以妞妞需要将自己的勇气值恰好变为n, 请你帮助她设计一个勇气获得机的按键方案使妞妞的勇气值恰好变为n。输出一行字符串, 每个字符表示该次妞妞选择按动的按钮,'N'表示该次按动N按钮,'G'表示该次按动G按钮。输入包括一行, 包括一个正整数n(1 <= n <= 10^9), 表示妞妞最后需要的勇气值。if(n % 2 == 0 ){ //n是偶数。
2024-04-21 11:29:13
630
1
原创 竞赛技巧（Java）
一共有 N(1<=N<=5,000)条时间被以时(0<=Hours<=99)， 分(0<=Minutes<=59)，秒(0<=Seconds<=59)的形式记录。在ACM竞赛中，当遇到有两个队伍（人） 解出相同的题目数量的时候，我们需要通过他们解决问题的总时间进行排序。第 1 行，一个整数 N 第 2~n+1 行，每行 3 个整数，表示时，分，秒。
2024-04-20 15:28:11
396
原创 课程满意度计算（Java）
反之,往下依次执行每位同学喜欢的课程编号.这里,我们用数组序号代表同学喜欢的编号进行累加计算,若喜欢编号1一次,数组arr[1] ++ ,喜欢编号2一次,则数组arr[2] ++,所有同学循环下来,若课程被所有人同学喜欢,那么arr[课程编号]的值与同学数是相等的.最后,设置一个num，判断结果,循环判断每个数组的值是否等于同学数,若等于,则该课程被所有同学喜欢,num++.最后,循环结束，输出结果num.if(a[i] == N) //该数组索引的值等于同学数，说明这门课程被所有同学喜欢。
2024-04-18 16:03:19
265
原创 约瑟夫环（Java)
然后，我们将该出队序号删除，删除后，后面的序号会替补上来，下次循环时重新开始报数的位置就是被删除序号的下一个。这个过程会一直重复，最后，当数组里仅剩一个元素时，循环停止，输出剩下的那个元素。n个人（0,1,2,3,4...n-1），围成一圈，从编号为k的人开始报数，报数报到m的人出队（报数是1,2,...m这样报的）。下次从出队的人之后开始重新报数，循环往复，当队伍中只剩最后一个人的时候，那个人就是大王。现在，给定n，k，m， 请你求出大王的编号。//删除序号，也是重新报数序号。//读取数组仅剩的元素。
2024-04-16 21:59:34
580
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人