vue简单功能实现

Vue 实现计数器功能

创建一个基础的计数器，包含增加、减少和重置功能。

模板部分

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

脚本部分

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

Vue 实现待办事项列表

一个简单的待办事项列表，支持添加和删除任务。

模板部分

<template>
  <div>
    <input v-model="newTask" @keyup.enter="addTask" placeholder="输入任务">
    <ul>
      <li v-for="(task, index) in tasks" :key="index">
        {{ task }}
        <button @click="removeTask(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

脚本部分

<script>
export default {
  data() {
    return {
      newTask: '',
      tasks: []
    }
  },
  methods: {
    addTask() {
      if (this.newTask.trim() !== '') {
        this.tasks.push(this.newTask)
        this.newTask = ''
      }
    },
    removeTask(index) {
      this.tasks.splice(index, 1)
    }
  }
}
</script>

Vue 实现表单绑定

实现一个表单的双向数据绑定，包含输入验证。

模板部分

<template>
  <div>
    <form @submit.prevent="submitForm">
      <input v-model="form.name" placeholder="姓名">
      <input v-model="form.email" placeholder="邮箱">
      <button type="submit">提交</button>
    </form>
    <p v-if="error">{{ error }}</p>
  </div>
</template>

脚本部分

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        email: ''
      },
      error: ''
    }
  },
  methods: {
    submitForm() {
      if (!this.form.name || !this.form.email) {
        this.error = '请填写所有字段'
        return
      }
      this.error = ''
      console.log('表单提交:', this.form)
    }
  }
}
</script>

Vue 实现动态样式绑定

根据条件动态改变元素的样式或类名。

模板部分

<template>
  <div>
    <p :class="{ active: isActive, 'text-danger': hasError }">动态样式示例</p>
    <button @click="toggleActive">切换状态</button>
  </div>
</template>

脚本部分

<script>
export default {
  data() {
    return {
      isActive: true,
      hasError: false
    }
  },
  methods: {
    toggleActive() {
      this.isActive = !this.isActive
      this.hasError = !this.hasError
    }
  }
}
</script>

Vue 实现组件通信

通过 props 和 $emit 实现父子组件通信。

父组件

<template>
  <div>
    <child-component :message="parentMessage" @update-message="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="notifyParent">通知父组件</button>
  </div>
</template>

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