vue实现小功能

Vue 实现计数器功能

通过 Vue 的响应式数据绑定，可以快速实现一个计数器功能。

模板部分

<template>
  <div>
    <button @click="decrement">-</button>
    <span>{{ count }}</span>
    <button @click="increment">+</button>
  </div>
</template>

脚本部分

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

Vue 实现待办事项列表

利用 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>

Vue 实现表单验证

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

模板部分

<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 regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      return regex.test(this.email)
    }
  }
}
</script>

Vue 实现动态样式绑定

通过 :class 和 :style 实现动态样式切换。

模板部分

<template>
  <div>
    <button @click="toggleActive">切换样式</button>
    <div :class="{ active: isActive }" :style="styleObject">动态样式示例</div>
  </div>
</template>

脚本部分

<script>
export default {
  data() {
    return {
      isActive: false,
      styleObject: {
        color: 'blue',
        fontSize: '16px'
      }
    }
  },
  methods: {
    toggleActive() {
      this.isActive = !this.isActive
    }
  }
}
</script>

Vue 实现组件通信（父子传值）

通过 props 和 $emit 实现父子组件数据传递。

父组件模板

<template>
  <div>
    <ChildComponent :message="parentMessage" @update="handleUpdate"/>
  </div>
</template>

父组件脚本

<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: '来自父组件的消息'
    }
  },
  methods: {
    handleUpdate(newMessage) {
      this.parentMessage = newMessage
    }
  }
}
</script>

子组件模板

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendMessage">更新消息</button>
  </div>
</template>

子组件脚本

<script>
export default {
  props: ['message'],
  methods: {
    sendMessage() {
      this.$emit('update', '子组件修改后的消息')
    }
  }
}
</script>