<div>
  <p>{{ nickname.toUpperCase() }}</p>  <!-- 方法调用：将昵称转为大写 -->
  <p>{{ age >= 18 ? '成年' : '未成年' }}</p>  <!-- 三元表达式：条件判断 -->
  <p>{{ user.name + '(' + user.age + ')' }}</p>  <!-- 字符串拼接 -->
  <p>{{ getGreeting() }}</p>  <!-- 函数调用：执行方法返回结果 -->
</div>

const app = Vue.createApp({
  data() {
    return {
      nickname: 'vue-dev',
      age: 22,
      user: { name: '张三', age: 28 },
      getGreeting: () => 'Hello Vue!'
    }
  }
}).mount('#app');

<div id="app">
  <img 
    :src="currentImage" 
    :alt="imageDesc" 
    :title="imageTitle"
    style="width: 200px;"
  >
  <button @click="switchImage">切换图片</button>
</div>

const app = Vue.createApp({
  data() {
    return {
      // 图片列表
      images: [
        { src: 'https://picsum.photos/id/237/200/200', desc: '小狗', title: '可爱宠物' },
        { src: 'https://picsum.photos/id/1/200/200', desc: '风景', title: '自然景观' }
      ],
      currentIndex: 0  // 当前显示图片索引
    }
  },
  computed: {
    currentImage() { return this.images[this.currentIndex].src; },
    imageDesc() { return this.images[this.currentIndex].desc; },
    imageTitle() { return this.images[this.currentIndex].title; }
  },
  methods: {
    switchImage() {
      this.currentIndex = (this.currentIndex + 1) % this.images.length;
    }
  }
}).mount('#app');

<div id="counter">
  <h3>当前计数：{{ count }}</h3>
  <button @click="increment">+1</button>  <!-- 调用方法增加计数 -->
  <button @click="count--">-1</button>  <!-- 直接执行表达式减少计数 -->
  <button @click="add(5)">+5</button>  <!-- 传递参数 -->
</div>

const app = Vue.createApp({
  data() { return { count: 0 }; },
  methods: {
    increment() { this.count++; },  // 增加1
    add(step) { this.count += step; }  // 增加指定步长
  }
}).mount('#counter');

<div id="user-role">
  <div v-if="user.role === 'admin'">
    <h3>管理员面板</h3>
    <button>用户管理</button>
    <button>系统设置</button>
  </div>
  <div v-else-if="user.role === 'editor'">
    <h3>编辑面板</h3>
    <button>内容发布</button>
  </div>
  <div v-else>
    <h3>访客视图</h3>
    <p>请登录后操作</p>
  </div>
</div>

const app = Vue.createApp({
  data() {
    return {
      user: { role: 'admin' }  // 可修改为 'editor' 或其他值测试效果
    }
  }
}).mount('#user-role');

<div id="user-list">
  <ul>
    <!-- v-for遍历users数组，:key绑定唯一ID确保高效更新 -->
    <li v-for="(user, index) in users" :key="user.id" style="margin: 8px 0;">
      {{ index + 1 }}. {{ user.name }} ({{ user.age }}岁) 
      <button @click="deleteUser(user.id)">删除</button>
    </li>
  </ul>
  <p v-if="users.length === 0">暂无用户数据</p>
</div>

const app = Vue.createApp({
  data() {
    return {
      users: [
        { id: 1, name: '张三', age: 25 },
        { id: 2, name: '李四', age: 30 },
        { id: 3, name: '王五', age: 28 }
      ]
    }
  },
  methods: {
    deleteUser(id) {
      this.users = this.users.filter(user => user.id !== id);
    }
  }
}).mount('#user-list');

<div id="app">
  <input type="text" v-model="username" placeholder="输入用户名">
  <p>用户名：{{ username }}</p>

  <textarea v-model="description" rows="3" placeholder="输入描述"></textarea>
  <p>描述：{{ description }}</p>
</div>

const app = Vue.createApp({
  data() {
    return { username: '', description: '' };
  }
}).mount('#app');

<div id="checkboxes">
  <!-- 单个复选框：布尔值绑定 -->
  <label>
    <input type="checkbox" v-model="agree"> 同意协议
  </label>
  <p>是否同意：{{ agree ? '是' : '否' }}</p>

  <!-- 多个复选框：数组绑定 -->
  <div>
    <p>选择爱好（可多选）：</p>
    <label><input type="checkbox" v-model="hobbies" value="reading"> 阅读</label>
    <label><input type="checkbox" v-model="hobbies" value="sports"> 运动</label>
    <label><input type="checkbox" v-model="hobbies" value="coding"> 编程</label>
  </div>
  <p>选中的爱好：{{ hobbies.join(', ') }}</p>
</div>

const app = Vue.createApp({
  data() {
    return { agree: false, hobbies: [] };
  }
}).mount('#checkboxes');

<div id="selects">
  <!-- 单选下拉框 -->
  <select v-model="city">
    <option value="">请选择城市</option>
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
  </select>
  <p>选中城市：{{ city }}</p>

  <!-- 多选下拉框（按住Ctrl键多选） -->
  <select v-model="tags" multiple size="3">
    <option value="vue">Vue</option>
    <option value="react">React</option>
    <option value="angular">Angular</option>
  </select>
  <p>选中标签：{{ tags.join(', ') }}</p>
</div>

const app = Vue.createApp({
  data() {
    return { city: '', tags: [] };
  }
}).mount('#selects');

<form @submit.prevent="handleSubmit">
  <input type="text" v-model="username" required>
  <button type="submit">提交</button>
</form>

methods: {
  handleSubmit() {
    console.log('提交数据：', this.username);  // 无需手动调用 event.preventDefault()
  }
}

<div @click="parentClick" style="padding: 20px; background: #eee;">
  外层div
  <button @click.终止="childClick">点击我（仅触发子事件）</button>
</div>

methods: {
  parentClick() { console.log('触发外层点击'); },
  childClick() { console.log('触发按钮点击'); }  // 不会触发 parentClick
}