vue2.j 动态class、v-if 活学活用

最新推荐文章于 2024-07-16 20:15:00 发布
最新推荐文章于 2024-07-16 20:15:00 发布
阅读量544 收藏
点赞数
文章标签： servlet java html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A1818056/article/details/125946743
版权
本文展示了如何在Vue2.js中使用动态class和v-if指令来实现页面交互。通过点击不同的配置选项（服务配置、网络配置、端口配置），相应组件根据v-if条件显示和隐藏，同时应用不同class实现高亮状态。这种方式增强了用户体验并优化了代码结构。
摘要由CSDN通过智能技术生成

<template>

  <div class="cfg-page-con poi">

    <div class="page-inline">

      <div class="page-bestinline">

        <div class="layout">

          <div class="page-upper">

            <div class="page" :class="{'active':isActive}" style="width:65px" @click="a">服务配置</div>

            <div class="page" :class="{'active':isActive1}" style="width:65px" @click="b">网络配置</div>

            <div class="page" :class="{'active':isActive2}" style="width:65px" @click="c">端口配置</div>

          </div>

          <div>

            <div v-if="show">

           

最低0.47元/天 解锁文章
睿睿1818
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
总结vue中动态class的几种写法
以沫wh的博客
05-06 1471
对象语法 1下面的语法表示 active 这个 class 存在与否将取决于数据 isActive 的 truthiness。 <div v-bind:class="{ active: isActive }"></div> 2 v-bind:class 指令也可以与普通的 class attribute 共存 <div class="static" v-bind:class="{ active: isActive }" ></div> 3 绑定的数
Vue2的class和style动态样式分析
骆小洛
11-03 2310
操作元素的 动态class 列表和动态内联样式是数据绑定的一个常见使用场景。动态class和style有字符串，对象，数组三种形式。class动态样式#对象语法1、我们可以传给一个对象，以动态地切换 class：上面的语法表示active这个 class 存在与否将取决于数据isActive属性的。2、我们可以在对象中传入多个对这样的属性及属性值来动态控制多个class。此外，指令也可以与普通的 class共存。代码如下：data: {
【vuejs】vue2 class和style基础讲解和项目实战使用
最新发布
工作的日常记录和平凡的生活分享
07-16 1055
Vue 2中的class和style绑定提供了灵活而强大的数据绑定功能，允许开发者以声明式的方式动态地操作元素的CSS类和内联样式。通过对象语法和数组语法，Vue使得根据组件状态切换类和应用样式变得简洁而直观。对象语法：通过传递一个对象给或，可以基于数据属性的真值动态添加或移除CSS类和样式。这种方式非常适合处理单一或少量条件的绑定。数组语法：允许将多个类或样式对象组合应用到元素上，适合处理更复杂或多个条件的绑定情况。数组中的每个元素可以是字符串或对象，Vue会自动处理它们并将结果应用于元素。组件支持。
vue2之动态class与动态class组件的封装
weixin_43845137的博客
03-22 411
【代码】vue2之动态class与动态class组件的封装。
vue2 v-for ,虚拟dom ，diff算法，动态class，动态style
Cxil的博客
11-24 1651
概念：.vue 中的template里面写的标签，都是模版，要被vue处理成虚拟dom对象，才会渲染现实到真实Dom页面上。介绍：内存生成一样的虚拟Dom结构 本质是个js 对象因为真实的dom属性好几百个，没办法快速的知道哪一个属性改变了。比如template 里面的标签结构对应的虚拟dom 结构以后vue数据更新，生成新的虚拟dom结构 和 旧的 dom结构 对比 利用diff算法，找不同，只更新变化的部分（重绘/回流）到页面。也叫打补丁。
vue2 class与style动态绑定语法
qq_42880714的博客
06-12 2391
class与style都是标签内的属性，可以使用v-bind指令解析表达式来实现动态添加。vue对class与style做了专门的增强，classstyle的表达式结果类型可以是字符串、对象或者数组。
nuxt.js框架使用vue-waterfall-easy插件如何引入--语法引用
weixin_45041261的博客
05-31 1544
实话：我之前完全不知道vue-waterfall-easy这个插件，当我看到需求瀑布流+无限滚动的时候，我脑子里想的还是flex布局。。。 我们大佬说“你自己写的瀑布流+无限滚动肯定会出问题的”，然后我就果断放弃了（毕竟我是一个还没有入门的菜鸡），大佬给我普及了这个插件以及在vue中如何使用，让我自己找一找在nuxt里面的引入方法（这个任务，我也很果断，20分钟没有头绪，直接回头找大佬，哈哈哈哈哈哈） 所以在这里再总结一下引入的方法（使用方法我也是一知半解，探索中，所以不敢胡乱BB）。 这次在nuxt的引入
Vue 16v-if和v-show的特点
mqingo的博客
01-02 1941
16v-if和v-show的特点.html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;16v-if和v-show的特点&lt;/title&gt; &lt;script type="text/javascript&quot
vue如何判断dom的class
08-27
使用 Vue 框架来判断 DOM 的 class 是非常简单的，我们只需要使用 Vue 的模板语法来渲染 DOM，然后使用 JavaScript 代码来添加和获取 DOM 的 class。 通过这个实例，我们可以学习到如何使用 Vue 框架来判断 DOM 的 ...
Vue 09Vue中使用行内样式---class
mqingo的博客
01-02 2750
09Vue中使用样式---class.html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;09Vue中使用样式----class&lt;/title&gt; &lt;script type="text/javascript
Vue2 --动态绑定class、过滤器参数、$ref、自定义指令、计算属性与监听器
weixin_51972964的博客
12-15 1163
v-bind动态绑定class <div :class='['default-class',{'active-class':isActive}]'> </div> <div :class='{'active-class':isActive}' data(){ return{ isActive:true } } 过滤器-filter参数 过滤器默认有一个实参,即管道符前面的数值,如果需要传参,则设多个形参,实参从第二个形参开始 <div>{{ text
vue class的绑定
不靠谱的作曲家
12-30 1946
1.对象的绑定 基本用法 :class="{ 'active': isActive }" 判断是否绑定 :class="{'active':isActive==-1}" 或者 :class="{'active':isActive==index}" 2.绑定并判断多个 第一种（用逗号隔开） :class="{ 'active': isActive, 'sort': isSort }" 第二种（放...
【Vue】动态设置元素类以及样式
cannotbecounted的博客
08-23 2490
介绍Vue2中动态为DOM元素添加类和样式的方法。
Vue中动态绑定class时使用v-if进行绑定class
热门推荐
给我一个姑娘的博客
07-31 2万+
在使用Vue时，遇到一个需求，就是根据数值不同赋予一个div不同得样式，翻看文档，文档并没有提到可以或如何使用if进行判断，于是进行了尝试，发现是可以的。 ###下面让我们观看代码 <div v-for="(item,index) in testList" :key="index"> <div :class="[{'r': (item.size <= 5 )},...
vue 根据if添加class_vue 利用vue-if else做 动态导航以及动态class
weixin_31008279的博客
12-30 664
div部分导航部分判断 active 跟item 相等的时候 用navigationA 样式 否则 就用 navigation样式{{item}}导航内容判断 type = 'A' 的时候显示里面是组件里面是组件Not A/B/Cjs部分内容//数据data() {return {active :'背景概述',navigation:'navigation',type:'A',navarr:['...
Vue实现动态组件
stella_stella123的博客
06-03 378
Vue实现动态组件
Vue动态绑定class、v-if等
weixin_42216094的博客
09-27 7093
vue中动态绑定的写法与简单使用。
Vue学习计划-Vue2--Vue核心（四）watch监听属性、动态绑定class、style，set方法的使用
我愿化作繁星
12-02 1766
Vue学习计划-Vue2--Vue核心（四）watch监听属性、动态绑定class、style，set方法的使用
v-if添加过渡动画
09-01
- *2* [Vue3——使用v-if或v-show来实现过渡的动画效果](https://blog.csdn.net/nanchen_J/article/details/126874218)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值