vue实现小功能

Vue 实现常见小功能的方法

计数器功能

通过 Vue 的响应式数据和事件绑定实现简单的计数器功能。

<template>
  <div>
    <p>当前计数: {{ count }}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    }
  }
}
</script>

待办事项列表

利用 v-for 和 v-model 实现待办事项的添加和展示。

<template>
  <div>
    <input v-model="newTodo" @keyup.enter="addTodo">
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo }}
        <button @click="removeTodo(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: []
    }
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim()) {
        this.todos.push(this.newTodo)
        this.newTodo = ''
      }
    },
    removeTodo(index) {
      this.todos.splice(index, 1)
    }
  }
}
</script>

表单验证

结合计算属性和条件渲染实现简单的表单验证。

<template>
  <div>
    <input v-model="email" placeholder="输入邮箱">
    <p v-if="!isValidEmail && email" style="color: red">邮箱格式不正确</p>
    <button :disabled="!isValidEmail">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: ''
    }
  },
  computed: {
    isValidEmail() {
      const re = /\S+@\S+\.\S+/
      return re.test(this.email)
    }
  }
}
</script>

图片切换器

使用条件渲染和事件处理实现图片切换效果。

<template>
  <div>
    <button @click="prevImage">上一张</button>
    <img :src="currentImage" alt="展示图片">
    <button @click="nextImage">下一张</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        'image1.jpg',
        'image2.jpg',
        'image3.jpg'
      ],
      currentIndex: 0
    }
  },
  computed: {
    currentImage() {
      return this.images[this.currentIndex]
    }
  },
  methods: {
    prevImage() {
      this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length
    },
    nextImage() {
      this.currentIndex = (this.currentIndex + 1) % this.images.length
    }
  }
}
</script>

搜索过滤

利用计算属性实现列表的实时搜索过滤。

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索...">
    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: '苹果' },
        { id: 2, name: '香蕉' },
        { id: 3, name: '橙子' }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

这些示例展示了 Vue 在实现常见小功能时的基本模式，可以根据实际需求进行调整和扩展。