第4课: 条件渲染与列表渲染

🔍 v-show实时演示

<template>
  <div>
    <h1 v-show="isVisible">Hello Vue3!</h1>
    
    <div style="margin: 20px 0;">
      <button @click="toggleVisibility">
        {{ isVisible ? '隐藏' : '显示' }}标题
      </button>
      
      <button @click="toggleAnimation">
        {{ useAnimation ? '关闭' : '开启' }}动画
      </button>
    </div>
    
    <!-- 复杂组件的显示控制 -->
    <div v-show="showAdvancedOptions" class="advanced-options">
      <h3>高级选项</h3>
      <div>
        <label>选项1: <input type="checkbox" v-model="option1"></label>
        <label>选项2: <input type="checkbox" v-model="option2"></label>
        <label>选项3: <input type="checkbox" v-model="option3"></label>
      </div>
    </div>
    
    <button @click="showAdvancedOptions = !showAdvancedOptions">
      {{ showAdvancedOptions ? '隐藏' : '显示' }}高级选项
    </button>
    
    <!-- 显示当前状态 -->
    <p>标题显示状态: {{ isVisible ? '显示' : '隐藏' }}</p>
    <p>高级选项状态: {{ showAdvancedOptions ? '显示' : '隐藏' }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const isVisible = ref(true)
const useAnimation = ref(true)
const showAdvancedOptions = ref(false)
const option1 = ref(false)
const option2 = ref(false)
const option3 = ref(false)

function toggleVisibility() {
  isVisible.value = !isVisible.value
}

function toggleAnimation() {
  useAnimation.value = !useAnimation.value
}
</script>

<style scoped>
.advanced-options {
  border: 1px solid #ccc;
  padding: 15px;
  margin: 10px 0;
  border-radius: 5px;
  background-color: #f9f9f9;
}

h1 {
  transition: all 0.3s ease;
}

h1[v-show="false"] {
  opacity: 0;
  transform: translateY(-20px);
}
</style>

📊 完整数组遍历示例

<template>
  <div>
    <h3>任务列表管理</h3>
    
    <!-- 基本遍历 -->
    <div class="task-list">
      <h4>任务列表（基本遍历）</h4>
      <ul>
        <li v-for="task in tasks" :key="task.id">
          <span :class="{ completed: task.completed }">{{ task.title }}</span>
          <button @click="toggleTask(task.id)">{{ task.completed ? '未完成' : '完成' }}</button>
          <button @click="removeTask(task.id)">删除</button>
        </li>
      </ul>
    </div>

    <!-- 带索引遍历 -->
    <div class="task-list">
      <h4>任务列表（带索引）</h4>
      <ul>
        <li v-for="(task, index) in tasks" :key="task.id">
          <span>{{ index + 1 }}. {{ task.title }}</span>
          <span :class="['priority', 'priority-' + task.priority]">
            优先级: {{ getPriorityText(task.priority) }}
          </span>
        </li>
      </ul>
    </div>

    <!-- 条件渲染与列表结合 -->
    <div class="task-list">
      <h4>已完成任务</h4>
      <template v-if="completedTasks.length > 0">
        <ul>
          <li v-for="task in completedTasks" :key="task.id">
            ✅ {{ task.title }}
          </li>
        </ul>
      </template>
      <p v-else>暂无已完成任务</p>
    </div>

    <!-- 统计信息 -->
    <div class="stats">
      <p>总任务数: {{ totalTasks }}</p>
      <p>已完成: {{ completedTasksCount }}</p>
      <p>未完成: {{ pendingTasksCount }}</p>
      <p>完成率: {{ completionRate }}%</p>
    </div>

    <!-- 添加新任务 -->
    <div class="add-task">
      <input v-model="newTaskTitle" placeholder="输入新任务">
      <select v-model="newTaskPriority">
        <option value="1">低优先级</option>
        <option value="2">中优先级</option>
        <option value="3">高优先级</option>
      </select>
      <button @click="addTask">添加任务</button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 任务数据
const tasks = ref([
  { id: 1, title: '学习Vue3基础', completed: true, priority: 3 },
  { id: 2, title: '掌握组件开发', completed: false, priority: 2 },
  { id: 3, title: '学习路由管理', completed: false, priority: 2 },
  { id: 4, title: '状态管理实践', completed: false, priority: 1 }
])

const newTaskTitle = ref('')
const newTaskPriority = ref('2')

// 计算属性
const completedTasks = computed(() => tasks.value.filter(task => task.completed))
const totalTasks = computed(() => tasks.value.length)
const completedTasksCount = computed(() => completedTasks.value.length)
const pendingTasksCount = computed(() => totalTasks.value - completedTasksCount.value)
const completionRate = computed(() => {
  return totalTasks.value > 0 ? Math.round((completedTasksCount.value / totalTasks.value) * 100) : 0
})

// 方法
function addTask() {
  if (newTaskTitle.value.trim()) {
    tasks.value.push({
      id: Date.now(),
      title: newTaskTitle.value,
      completed: false,
      priority: parseInt(newTaskPriority.value)
    })
    newTaskTitle.value = ''
  }
}

function toggleTask(id) {
  const task = tasks.value.find(t => t.id === id)
  if (task) task.completed = !task.completed
}

function removeTask(id) {
  tasks.value = tasks.value.filter(t => t.id !== id)
}

function getPriorityText(priority) {
  const priorityMap = { 1: '低', 2: '中', 3: '高' }
  return priorityMap[priority] || '未知'
}
</script>

<style scoped>
.task-list {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.completed {
  text-decoration: line-through;
  color: #888;
}

.priority { padding: 2px 8px; border-radius: 3px; color: white; }
.priority-1 { background: #28a745; }
.priority-2 { background: #ffc107; color: black; }
.priority-3 { background: #dc3545; }

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 20px 0;
}

.add-task {
  display: flex;
  gap: 10px;
  align-items: center;
}
</style>

👤 用户信息对象遍历示例

<template>
  <div>
    <h3>用户信息展示</h3>
    
    <!-- 基本遍历：只获取值 -->
    <div class="info-section">
      <h4>用户信息（值遍历）</h4>
      <ul>
        <li v-for="value in userInfo" :key="value">
          {{ value }}
        </li>
      </ul>
    </div>

    <!-- 带键名遍历 -->
    <div class="info-section">
      <h4>用户信息（键值对）</h4>
      <ul>
        <li v-for="(value, key) in userInfo" :key="key">
          <strong>{{ formatKey(key) }}:</strong> {{ formatValue(key, value) }}
        </li>
      </ul>
    </div>

    <!-- 带键名和索引 -->
    <div class="info-section">
      <h4>用户信息（带索引）</h4>
      <table>
        <thead>
          <tr>
            <th>序号</th>
            <th>属性名</th>
            <th>属性值</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(value, key, index) in userInfo" :key="key">
            <td>{{ index + 1 }}</td>
            <td>{{ formatKey(key) }}</td>
            <td>{{ formatValue(key, value) }}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 嵌套对象遍历 -->
    <div class="info-section" v-if="userProfile">
      <h4>用户档案（嵌套对象）</h4>
      <div v-for="(section, sectionName) in userProfile" :key="sectionName">
        <h5>{{ formatSectionName(sectionName) }}</h5>
        <ul>
          <li v-for="(value, key) in section" :key="key">
            {{ formatKey(key) }}: {{ value }}
          </li>
        </ul>
      </div>
    </div>

    <!-- 编辑模式 -->
    <div class="info-section">
      <h4>编辑用户信息</h4>
      <div v-for="(value, key) in editableUserInfo" :key="key" class="edit-field">
        <label :for="key">{{ formatKey(key) }}:</label>
        <input :id="key" v-model="editableUserInfo[key]" :type="getInputType(key)">
      </div>
      <button @click="saveChanges">保存修改</button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

// 用户信息对象
const userInfo = reactive({
  name: '张三',
  age: 25,
  email: 'zhangsan@example.com',
  phone: '13800138000',
  city: '北京市',
  occupation: '前端工程师',
  joinDate: '2023-01-15'
})

// 嵌套用户档案
const userProfile = reactive({
  basic: {
    gender: '男',
    birthday: '1998-05-20',
    education: '本科'
  },
  work: {
    company: '某科技公司',
    department: '前端开发部',
    position: '高级工程师'
  },
  contact: {
    wechat: 'zhangsan123',
    qq: '123456789',
    address: '北京市朝阳区'
  }
})

// 可编辑的用户信息
const editableUserInfo = reactive({ ...userInfo })

// 格式化方法
function formatKey(key) {
  const keyMap = {
    name: '姓名', age: '年龄', email: '邮箱', phone: '电话',
    city: '城市', occupation: '职业', joinDate: '加入日期',
    gender: '性别', birthday: '生日', education: '学历',
    company: '公司', department: '部门', position: '职位',
    wechat: '微信', qq: 'QQ', address: '地址'
  }
  return keyMap[key] || key
}

function formatValue(key, value) {
  if (key === 'joinDate' || key === 'birthday') {
    return new Date(value).toLocaleDateString('zh-CN')
  }
  return value
}

function formatSectionName(sectionName) {
  const sectionMap = {
    basic: '基本信息', work: '工作信息', contact: '联系信息'
  }
  return sectionMap[sectionName] || sectionName
}

function getInputType(key) {
  if (key === 'age') return 'number'
  if (key.includes('Date') || key === 'birthday') return 'date'
  if (key === 'email') return 'email'
  if (key === 'phone') return 'tel'
  return 'text'
}

function saveChanges() {
  Object.assign(userInfo, editableUserInfo)
  alert('用户信息已更新！')
}
</script>

<style scoped>
.info-section {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

table th, table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.edit-field {
  margin: 10px 0;
  display: flex;
  align-items: center;
}

.edit-field label {
  width: 100px;
  font-weight: bold;
}

.edit-field input {
  flex: 1;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
}
</style>