vue中v-bind控制class和style

当使用v-bind指令控制class和style时，可以通过动态绑定的方式根据不同的条件来添加或移除class，以及改变元素的样式。

1. 控制class

通过v-bind:class可以动态绑定class属性。可以使用对象语法、数组语法或者计算属性来实现。

• 对象语法：使用对象语法，可以根据条件来动态添加或移除class。

  <div :class="{ active: isActive }"></div>
  

  在上面的例子中，如果isActive为true，则会给该元素添加一个名为"active"的class。

• 数组语法：使用数组语法，可以根据条件来添加或移除多个class。

  <div :class="[isActive ? 'active' : '', isHighlighted ? 'highlighted' : '']"></div>
  

  在上面的例子中，如果isActive为true，则会给该元素添加一个名为"active"的class；如果isHighlighted为true，则会给该元素添加一个名为"highlighted"的class。

• 计算属性：使用计算属性，可以根据条件来动态计算class。

  <div :class="computedClasses"></div>
  

  computed: {
    computedClasses() {
      return {
        active: this.isActive,
        highlighted: this.isHighlighted
      }
    }
  }
  

  在上面的例子中，根据isActive和isHighlighted的值，计算出一个包含active和highlighted的class对象。

2. 控制style

通过v-bind:style可以动态绑定style属性。可以直接绑定一个样式对象，也可以使用计算属性来计算一个样式对象。

• 直接绑定样式对象：直接绑定一个样式对象，可以根据条件来动态设置元素的样式。

  <div :style="{ color: isActive ? 'red' : 'blue', fontSize: isHighlighted ? '20px' : '14px' }"></div>
  

  在上面的例子中，如果isActive为true，则设置该元素的color为红色；如果isHighlighted为true，则设置该元素的fontSize为20px。

• 计算属性：使用计算属性，可以根据条件来计算一个样式对象。

  <div :style="computedStyles"></div>
  

  computed: {
    computedStyles() {
      return {
        color: this.isActive ? 'red' : 'blue',
        fontSize: this.isHighlighted ? '20px' : '14px'
      }
    }
  }
  

  在上面的例子中，根据isActive和isHighlighted的值，计算出一个包含color和fontSize的样式对象。

通过动态绑定class和style，可以根据不同的条件来改变元素的外观和样式，实现更灵活的界面效果。

导航栏选中字体高亮显示

注意以下代码需要放HTML代码中运行

<div id="app">
    <nav>
      <ul>
        <li v-for="(item, index) in navItems" :key="index" :class="{ active: selectedIndex === index }" @click="selectNavItem(index)" >
          {{ item.text }}
        </li>
      </ul>
    </nav>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
   
var app = new Vue({
    el: '#app',
    data: {
      navItems: [
        { text: '首页', color: '#f44336' },
        { text: '关于', color: '#9c27b0' },
        { text: '联系', color: '#4caf50' },
        { text: '帮助', color: '#ff9800' }
      ],
      selectedIndex: 0
    },
    methods: {
     selectNavItem(index) {
        this.selectedIndex = index;
      }
    }
  
   

})
  

以上代码是一个简单的导航栏组件，使用Vue.js来实现导航栏的点击高亮效果。

在代码中，<div id="app">是Vue实例的挂载点，Vue会将组件渲染到这个挂载点下。

<nav>标签内部是一个无序列表<ul>，通过v-for指令遍历navItems数组，生成列表项<li>。v-for="(item, index) in navItems"表示将navItems数组中的每一项item遍历，并将当前项的索引index也绑定到变量中。

:key="index"指定每一个列表项的唯一key值，以便在重绘时进行优化。

:class="{ active: selectedIndex === index }"使用了动态绑定class的对象语法，根据selectedIndex的值和列表项的索引index是否相等，决定是否给该列表项添加名为"active"的class。如果相等，则添加，实现高亮效果。

@click="selectNavItem(index)"绑定了点击事件，当点击列表项时，触发selectNavItem方法，将当前项的索引index传入，从而更新selectedIndex的值，实现切换高亮的效果。

在Vue实例中，data属性中navItems是一个包含导航项的数组，selectedIndex是当前选中的导航项的索引。methods属性中定义了一个selectNavItem方法，用于更新selectedIndex的值。

最后，通过实例化Vue对象，将el属性指定为"#app"，将Vue实例挂载到页面上。然后Vue会监听数据的变化，根据数据的变化自动更新界面，实现导航栏的点击高亮效果。