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显示激活的 样式,别的去掉激活的样式 <div class="buttonText" :class="{activeOrange:active==2}" @click="commonClick('电力部')">电力部</div><div class="buttonText" :class="{activeOrange:active==3}" @click="commonClick('化工部')">化工部</div><
适用于:要绑定的样式个数不确定、名字也不确定需求:动态绑定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节点了。