Vue动态添加样式

发布时间：2023-05-18

一、Vue动态添加激活样式

在Vue中，我们可以使用 v-bind:class 指令动态添加类名，实现激活状态的显示。

<p v-bind:class="{active: isActive}">动态添加激活样式</p>

data () {
  return {
    isActive: true
  }
}

在这个例子中，我们使用 v-bind:class 指令绑定了一个对象，对象中的键名是类名，键值是一个布尔类型的变量 isActive。当 isActive 为 true 时，类名为 active 的样式将会被添加到这个元素上。

二、Vue如何动态添加样式

在Vue中，我们还可以使用内联样式、计算属性、动态绑定等方式来实现动态添加样式。

1. 内联样式

<p v-bind:style="{color: activeColor, fontSize: fontSize + 'px'}">动态添加内联样式</p>

data () {
  return {
    activeColor: 'red',
    fontSize: 16
  }
}

在这个例子中，我们使用 v-bind:style 指令绑定了一个对象，对象中的键名是CSS属性名，键值是一个Vue数据变量。这样我们就可以在Vue实例中动态改变样式。

2. 计算属性

<p v-bind:style="{background: oddColor}">动态添加计算属性样式</p>

data () {
  return {
    list: [1, 2, 3, 4, 5],
    activeIndex: 3
  }
},
computed: {
  oddColor () {
    return this.activeIndex % 2 === 0 ? 'red' : 'blue'
  }
}

在这个例子中，通过计算属性 oddColor 来动态添加样式。当 activeIndex 为偶数时，background 将会变成红色，否则为蓝色。

3. 动态绑定

<p :class="[{'active': isActive}, className]">动态绑定样式</p>

data () {
  return {
    isActive: true,
    className: 'font-bold'
  }
}

在这个例子中，我们使用 :class 绑定了一个数组。数组的第一个元素是一个对象，当 isActive 为 true 时，active 类名将会被添加到这个元素上。数组的第二个元素是一个变量 className，它是一个字体加粗的类名。

三、Vue添加动态检验

在Vue中，我们可以使用 v-bind:style 和 :class 等指令动态添加样式。但是，有些情况下我们并不想任意添加样式，需要加入判断条件来限制。

1. 判断类名

<p :class="[{'active': isActive}, {'font-bold': isBold}]">判断类名的动态添加样式</p>

data () {
  return {
    isActive: true,
    isBold: false
  }
}

在这个例子中，我们使用 :class 指令绑定了一个数组，数组中有两个对象。第一个对象只会在 isActive 为 true 时添加 active 的类名。第二个对象只会在 isBold 为 true 时添加 font-bold 的类名。

2. 判断样式

<p :style="isSmall ? {fontSize: '16px'} : {fontSize: '20px'}">判断样式的动态添加样式</p>

data () {
  return {
    isSmall: false
  }
}

在这个例子中，我们使用 v-bind:style 指令绑定了一个三目运算符，根据 isSmall 的值来判断添加的样式。如果 isSmall 为 true，fontSize 将会变成 16px，否则为 20px。

四、Vue动态添加组件

在Vue中，我们可以使用 v-if 和 v-for 等指令来动态添加组件。其中，v-if 用于根据条件控制组件是否显示，v-for 用于循环生成组件。

1. v-if

<template>
  <div>
    <button @click="show">显示/隐藏组件</button>
    <div v-if="showComponent">
      <p>动态添加组件v-if</p>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      showComponent: false
    }
  },
  methods: {
    show () {
      this.showComponent = !this.showComponent
    }
  }
}
</script>

在这个例子中，我们使用 v-if 指令来动态添加组件。当 showComponent 为 true 时，组件将会显示，否则隐藏。

2. v-for

<template>
  <div>
    <div v-for="(item, index) in list" :key="index">
      <p>动态添加组件v-for</p>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      list: [1, 2, 3]
    }
  }
}
</script>

在这个例子中，我们使用 v-for 指令循环生成组件。根据 list 数组的长度，生成相应次数的组件。

五、Vue动态添加路由

在Vue中，我们可以使用 Vue Router 来实现 SPA（单页应用）的路由功能。Vue Router 提供了多种方式来实现动态添加路由的功能。

1. 编程式导航

<template>
  <button @click="addRoute">点击添加路由</button>
</template>
<script>
import { routes } from './routes'
export default {
  methods: {
    addRoute () {
      const newRoute = {
        path: '/new',
        component: () => import('./views/New.vue')
      }
      routes.push(newRoute)
      router.addRoutes([newRoute])
    }
  }
}
</script>

在这个例子中，我们使用编程式导航的方式来动态添加路由。首先定义新的路由规则 newRoute，然后将其添加到原有的路由规则中。最后使用 router.addRoutes() 方法更新路由规则。

2. 路由元信息

const newRoute = {
  path: '/new',
  component: () => import('./views/New.vue'),
  meta: {
    auth: true
  }
}
routes.push(newRoute)
router.addRoutes([newRoute])

在这个例子中，我们在新的路由规则中添加了一个 meta 属性，用于存储路由元信息。在实际开发中，我们可以使用这个属性来判断当前路由是否需要用户登录授权等操作。

六、Vue动态设置样式

在Vue中，我们可以使用内置的 v-bind 指令来动态设置样式。v-bind 指令可以使用简写的形式 :。

1. 内联样式

<p :style="{color: fontColor, fontSize: fontSize + 'px'}">动态设置内联样式</p>

data () {
  return {
    fontColor: 'red',
    fontSize: 16
  }
}

在这个例子中，我们使用 v-bind 指令绑定了一个对象，对象中的键名是CSS属性名，键值是一个Vue数据变量。这样我们就可以在Vue实例中动态改变样式。

2. class样式

<p :class="[{'active': isActive}, className]">动态设置class样式</p>

data () {
  return {
    isActive: true,
    className: 'font-bold'
  }
}

在这个例子中，我们使用 :class 指令绑定了一个数组。数组的第一个元素是一个对象，当 isActive 为 true 时，active 类名将会被添加到这个元素上。数组的第二个元素是一个变量 className，它是一个字体加粗的类名。

七、动态加载Vue

在Vue中，我们可以通过 Vue.js 官方提供的 CDN 来动态加载 Vue.js 库的 js 文件。这个功能非常实用，尤其是在移动端 Web 应用开发中，可以有效地减小页面的载入时间。

function loadScript (url, callback) {
  const script = document.createElement('script')
  script.type = 'text/javascript'
  script.src = url
  script.onload = function () {
    callback()
  }
  document.head.appendChild(script)
}
loadScript('https://cdn.jsdelivr.net/npm/vue', function () {
  console.log('Vue.js loaded.')
})

在这个例子中，我们定义了一个 loadScript 函数来加载 Vue.js 的 js 文件。函数接受两个参数，第一个是 Vue.js 的 CDN 地址，第二个是回调函数。当 Vue.js 文件加载完毕后，会调用回调函数。 总之，Vue动态添加样式非常方便，有很多种方法可以实现。我们可以根据需求来选择合适的方法。

推荐文章