vue用多了反而疏忽了选择器的使用

最新推荐文章于 2024-07-12 16:27:40 发布
最新推荐文章于 2024-07-12 16:27:40 发布
阅读量134 收藏
点赞数 1
文章标签： css3 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Isaac_Play/article/details/104513902
版权

在vue项目中，经常使用v-for数组对象来动态生成组件布局，对于一些比如说下拉组件功能的页面，在实现他们的点击隐藏出现功能的时候，我一开始竟然只想着用v-if来控制页面的显示与否，虽然在功能上是可以实现的，但是明明用选择器可以更方便的解决问题

$('.expertGroup').eq(index).children('.expertContent').toggle(); //第（index+1）个class是expertGroup的所有class是expertContent的子类，点击切换消失/出现

这样也完成了上面所完成的功能了，而且很方便，做东西的时候技术面还是要放开来才好，不然眼界容易被限死，代码也好像没了灵性，所以记录一下，警醒下自己

Isaac_Play
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue实现多标签选择器
10-15
在Vue.js中实现多标签选择器是一个常见的需求，特别是在构建数据筛选或过滤功能时。Element UI库是一个很好的工具，它提供了丰富的组件，可以帮助我们快速构建这样的功能。在本例中，我们将利用Element UI中的`el-...
vue多个元素的样式选择器问题
12-30
三目运算符只能进行两个的选择判断，多个选择就很难受了。 废话少说，直接上源码。 首先获取它的索引，通过索引来判断样式 // 索引key判断 (value, key=key> [key] to=/payment > 我是什么颜色 在data里面...
vue中不推荐操作dom？
qq_38935512的博客
09-09 3229
在vue官方文档中是不推荐直接操作DOM，遇到不可避免得情况下，也是可以操作DOM得。 不推荐操作DOM得缘由总结了几点 1.性能得损耗，操作DOM是及其损耗性能得，相信大多数人都不会推荐操作大量得DOM，而是从数据层入手，比较流行得vue, react,angular等都不是直接操作DOM得 2.代码得质量会降低，出现一些多余得代码，经常直接操作DOM 会导致一些不可预测得问题，当你在一个组件当...
解决vue中样式不起作用：样式穿透/深度选择器(/deep/)
热门推荐
weixin_44041976的博客
06-09 1万+
原因1：组件内部使用组件，添加了scoped属性原因2：动态引入html，也添加了scoped属性； 原因3：非以上两种； 一、添加了scoped属性: Vue中的scoped属性的效果主要是通过PostCss实现的。以下是转译前的代码: <style lang="less" scoped> .example{ color:red; } </style> <template> <div class="example">s
vue多个元素的样式选择器
no_have_name_的博客
11-27 1406
vue多个元素的样式选择器 三目运算符只能进行两个的选择判断，多个选择就很难受了。 废话少说，直接上源码。 首先获取它的索引，通过索引来判断样式 // 索引key判断 <div class="carborder" v-for="(value, key) in mycarinfo" :key="key"> <router-link ...
vue element多对多
m0_47579286的博客
05-05 425
客户列表 idea代码 /** 前端控制器 @author liyi @since 2020-05-01 */ @RestController @RequestMapping("/client") public class ClientController { @Autowired private IClientService iCl...
Vue 用Vant实现时间选择器的示例代码
10-16
在Vue.js框架中，Vant是一个轻量级的UI组件库，它提供了丰富的组件和设计样式，便于开发者快速构建移动应用。...在实际项目中，你可以根据需要调整时间选择器的类型（如年月日、小时分钟等），并添加更多的定制功能。
基于vue2.0实现的级联选择器
01-19
基于Vue的级联选择器，可以单项，二级， 三级级联，多级级联 web开发中我们经常会遇到级联选择器的问题，尤其是在表单中,无外乎几种情况： 单个级联 (下拉选择框，单选) 单个级联 (多项选择) 二级联动 （省份...
使用vue实现多规格选择实例（SKU）
10-16
在本文中，我们将探讨如何使用Vue.js框架实现一个多规格选择功能，通常用于电商项目中的商品详情页面，如SKU（Stock Keeping Unit）。Vue.js是一个轻量级的前端JavaScript库，它提供了一种声明式的数据绑定和组件化...
JS之防抖和节流
喵喵的博客
07-09 1011
在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。在后期有拓展了前缘防抖函数，即执行动作在前，设定延迟周期在后，周期内有事件被触发，不执行动作，且周期重新设定。当事件被触发时，设定一个周期延时执行动作，若周期又被触发，则重新设定周期，直到周期结束，执行动作。固定周期内，只执行一次动作，若没有新事件触发，不执行。
html高级篇
qq_48257021的博客
07-04 1011
translform:translateZ（100px）：仅仅是在z轴上移动（注意：translateZ一般用px单位）transform:translate3d（x，y，）：其中x、y、z分别指要移动的轴的方向的距离。translform:translateX（100px）：仅仅是在x轴上移动。translform:translateY（100px）：仅仅是在Y轴上移动。·z轴：垂直屏幕注意：往外面是正值，往里面是负值。·x轴：水平向右注意：X右边是正值，左边是负值。
【前端从入门到精通：第九课：CSS3新增属性及伸缩盒布局】
weixin_50556117的博客
07-09 1030
flexbox是一个很新的东西，在w3c希望可以使用flexbox实现一些更复杂的布局和应用。要开启弹性盒模型，只需要设置display的属性值 flex，因为它是CSS3中为display新添加的值类型。用于区分不同浏览器的内核，当CSS属性是实验性质的时候，可以加浏览器私有前缀，让对应浏览器兼容。align-items 定义flex子项在flex容器的当前行的侧轴(纵轴)方向的对齐方式。stretch ： align-content 的默认值，各行将会伸展以占用额外的空间。既过渡的速度，方式等。
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 211
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 93
vue 自定义滚动条同步拖动（移动端）
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？
Vinca@的博客
07-08 876
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。
Webkit简介以及工作流程
读心悦
07-10 302
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
lightchart 和百度echarts 有什么区别, 各自优势是什么
huanghm88的专栏
07-08 200
总体而言，Lightchart和百度Echarts都是强大的图表库，选择使用哪个取决于具体的需求和个人偏好。如果您对界面简洁和定制化有较高要求，可以选择Lightchart；社区活跃：百度Echarts拥有广泛的用户群体和开发者社区，用户可以通过社区获取到丰富的文档、教程和示例，解决问题和获取帮助。易于使用：Lightchart提供了方便易用的API和丰富的文档和示例，使用户能够快速上手并灵活使用图表库。成熟稳定：百度Echarts已经发布了多个版本，经过了长时间的发展和优化，具有较高的稳定性和可靠性。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
cc1314_工作、学习有感
07-12 87
通过sm4对文件进行加解密，用户输入密码
Vue 用Vant实现时间选择器
06-07
要在Vue中使用Vant实现时间选择器，需要先安装Vant组件库，然后在Vue组件中引入相关的时间选择器组件。 首先，在命令行中使用以下命令安装Vant： ``` npm install vant -S ``` 然后在Vue组件中引入相关的时间选择器组件，例如： ```vue <template> <van-datetime-picker v-model="currentDate" type="datetime" :min-date="minDate" :max-date="maxDate" title="选择时间" :formatter="formatter" /> </template> <script> export default { data() { return { currentDate: new Date(), minDate: new Date(2010, 0, 1), maxDate: new Date(2022, 11, 31), }; }, methods: { formatter(type, value) { if (type === 'year') { return `${value}年`; } else if (type === 'month') { return `${value}月`; } else if (type === 'day') { return `${value}日`; } else if (type === 'hour') { return `${value}时`; } else if (type === 'minute') { return `${value}分`; } return value; }, }, }; </script> ``` 在上面的代码中，我们使用了Vant的`van-datetime-picker`组件来实现时间选择器。我们设置了组件的`type`为`datetime`，表示选择的是日期和时间。我们还设置了`min-date`和`max-date`来限制可选的时间范围。 最后，我们还定义了一个`formatter`方法，用来自定义显示的时间格式。 以上就是使用Vant实现时间选择器的基本步骤。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值