Vue条件循环判断+计算属性+绑定样式v-bind的实例

下面我来详细讲解一下“Vue条件循环判断+计算属性+绑定样式v-bind的实例”。

确定需求

在使用Vue进行开发的过程中，经常会用到条件循环判断、计算属性以及绑定样式这三个功能。需要在开发过程中灵活运用，通过组合使用，达到更好的效果。

条件循环判断

Vue中的条件循环指令有v-if和v-for两个。其中，v-if指令可以根据对象的值对元素进行展示或者隐藏。v-for指令则是迭代数组或者对象展示对应的元素。

示例1

下面是一个列表展示的示例。当没有数据时，通过v-if指令隐藏表头，通过v-else指令展示提示文本“暂无数据”；当有数据时，通过v-for指令迭代展示每个数据的内容。

<template>
  <div>
    <table>
      <thead v-if="list.length">
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>国籍</th>
        </tr>
      </thead>
      <tbody v-if="list.length">
        <tr v-for="(item, index) in list" :key="item.id">
          <td>{{ index + 1 }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.country }}</td>
        </tr>
      </tbody>
      <tbody v-else>
        <tr><td colspan="4">暂无数据</td></tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [], // 数据列表
    };
  },
};
</script>

计算属性

计算属性指的是在Vue实例中定义一个属性，根据其他状态计算得出，并对外提供，可以配合条件循环判断指令使用，来进行更灵活的展示。

示例2

下面是一个文本框输入长度控制的示例。通过绑定计算属性disabled实现输入长度超过规定长度时，禁用提交按钮的效果。

<template>
  <div>
    <label for="input">请输入不超过10个字符的内容：</label>
    <input id="input" type="text" v-model="inputText" />
    <button :disabled="disabled" @click="handleSubmit">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: '', // 输入框文本值
    };
  },
  computed: {
    disabled() {
      return this.inputText.length > 10; // 计算属性，输入长度超过10禁用提交按钮
    },
  },
  methods: {
    handleSubmit() {
      // 提交事件
    },
  },
};
</script>

绑定样式

Vue中绑定样式有两种方式，一种是通过v-bind指令绑定动态样式，例如v-bind:class和v-bind:style，另一种是通过:class和:style指令进行简写。

示例3

下面是根据商品数量变更价格的示例。当商品数量大于10时，通过动态样式is-discount改变价格的样式，同时展示打折信息。

<template>
  <div>
    <p>商品数量：<input type="number" v-model="count" /></p>
    <p :class="{ 'is-discount': count > 10 }">价格：{{ price }}</p>
    <p v-if="count > 10">（超过10件享受8折优惠）</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0, // 商品数量
      price: 10, // 商品价格
    };
  },
  watch: {
    count() {
      // 监听输入框数量，重新计算价格
      if (this.count > 10) {
        this.price = 8;
      } else {
        this.price = 10;
      }
    },
  },
};
</script>

<style>
.is-discount {
  color: red;
  font-weight: bold;
}
</style>

以上就是“Vue条件循环判断+计算属性+绑定样式v-bind的实例”详细攻略。