添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

1、页面中多个div,点击当前div显示激活的样式,别的dov去掉激活的样式

 <div class="buttonText" :class="{activeOrange:active==2}" @click="commonClick('电力部')">电力部</div>
<div class="buttonText" :class="{activeOrange:active==3}" @click="commonClick('化工部')">化工部</div>
<div class="buttonText" :class="{activeOrange:active==4}" @click="commonClick('科技部')">科技部</div>
 .activeOrange{
              color: #271d00;
              background: #ffc000;

2、或者用下列动态添加样式

 <div class="openDiv" @click="isShowDiv=!isShowDiv" :class="currentYear=='all' ? 'openDivActive' :''">
    <i class="el-icon-arrow-right"></i>
                    页面中多个div,点击当前div显示激活的 样式,别的去掉激活的样式 &lt;div class="buttonText" :class="{activeOrange:active==2}" @click="commonClick('电力部')"&gt;电力部&lt;/div&gt;&lt;div class="buttonText" :class="{activeOrange:active==3}" @click="commonClick('化工部')"&gt;化工部&lt;/div&gt;&lt;
适用于:要绑定的样式个数不确定、名字也不确定需求:动态绑定style1,style2,style3样式,以便在控制台调试
对象写法,适用于:要绑定的样式个数确定、名字也确定,但要动态决定用不用
需求:实现固定class样式的绑定和取消
写法,xxx可以是字符串、对象、数组。
字符串写法适用于:类名不确定,要动态获取。
对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。
数组写法适用于:要绑定多个
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <style>
   #box{
				
v-viewer用于图片浏览的 Vue 组件,支持旋转、缩放、翻转等操作,基于 viewer.js。演示示例安装npm install v-viewer 手动引入样式文件import "viewerjs/dist/viewer.css"; 使用引入 v-viewer 及必需的 css 样式,并使用 Vue.use() 注册插件,之后即可使用。<template> <div i...
  需要使用echarts进行图表展示。由于div宽高是不固定的,因此需要先获取父级的宽高再把值赋予到图表的div中。   需要使用this.$nextTick(() => { });方法,在mounted中,保证DOM渲染完全后,在进行echarts初始化。 赋值操作: $("#chartLineBox").width($(".right").w...
可以使用Vue的v-for指令和数组来动态添加div节点,例如: 在Vue实例中定义一个数组dataList,然后使用v-for指令遍历这个数组,将每个元素渲染成一个div节点,最后通过Vue的方法向dataList数组中添加元素即可动态添加div节点。具体代码如下: <template> <div v-for="(item, index) in dataList" :key="index">{{ item }}</div> </div> </template> <script> export default { data() { return { dataList: ['div1', 'div2', 'div3'] methods: { addDiv() { this.dataList.push('div' + (this.dataList.length + 1)) </script> 在上面的代码中,我们定义了一个dataList数组,其中包含了三个元素,分别是'div1'、'div2'、'div3'。然后使用v-for指令遍历这个数组,将每个元素渲染成一个div节点。最后我们定义了一个addDiv方法,当调用这个方法时,会向dataList数组中添加一个新的元素,这样就可以动态添加div节点了。