1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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

// 普通字符串
const message = ref('你好，Vue 3！')

// 数字
const count = ref(42)

// 布尔值
const isActive = ref(true)

// 对象
const user = ref({ name: '小明', age: 25 })

// 数组
const tags = ref(['前端', 'Vue', 'JavaScript'])
</script>

<template>
  <!-- 插值可以显示任何 JavaScript 表达式的结果 -->
  <p>{{ message }}</p>           <!-- 输出：你好，Vue 3！ -->
  <p>{{ count + 10 }}</p>         <!-- 输出：52 -->
  <p>{{ isActive ? '启用' : '禁用' }}</p>  <!-- 输出：启用 -->
  <p>{{ user.name }}今年{{ user.age }}岁</p>  <!-- 输出：小明今年25岁 -->
  <p>{{ tags.join('、') }}</p>    <!-- 输出：前端、Vue、JavaScript -->
</template>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

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

// 一段包含 HTML 标签的字符串
const htmlContent = ref('<strong>加粗文字</strong>和<em>斜体文字</em>')
const cardData = ref({
  title: 'Vue 3 入门指南',
  desc: '这是一本<strong>非常好</strong>的教程'
})
</script>

<template>
  <!-- v-html 会把字符串当作 HTML 来渲染 -->
  <!-- ⚠️ 注意：永远不要对用户输入的字符串使用 v-html，可能导致 XSS 攻击！ -->
  <div v-html="htmlContent"></div>

  <!-- 更常见的用法：渲染从 API 获取的富文本 -->
  <article>
    <h2>{{ cardData.title }}</h2>
    <div v-html="cardData.desc"></div>
  </article>
</template>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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

const title = ref('这是标题')
const isDisabled = ref(true)
const imgUrl = ref('https://picsum.photos/200')
const dynamicClass = ref('active')
</script>

<template>
  <!-- v-bind:属性名="表达式" -->
  <h1 v-bind:title="title">鼠标悬停看看</h1>

  <!-- 缩写：v-bind:xxx 可以简写成 :xxx -->
  <button :disabled="isDisabled">不可点击的按钮</button>

  <!-- 图片的 src 属性 -->
  <img :src="imgUrl" alt="随机图片" />

  <!-- class 也可以用 v-bind -->
  <div :class="dynamicClass">动态 class</div>

  <!-- 多个属性绑定 -->
  <a :href="url" :target="target">链接</a>
</template>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

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

const firstName = ref('张')
const lastName = ref('三')
const count = ref(5)
const isLoggedIn = ref(true)
const items = ref(['苹果', '香蕉', '橙子'])
const user = ref({ role: 'admin' })
</script>

<template>
  <!-- 字符串拼接 -->
  <p>{{ firstName + lastName }}</p>          <!-- 张三 -->

  <!-- 算术运算 -->
  <p>{{ count * 2 + 1 }}</p>                  <!-- 11 -->

  <!-- 三元运算符 -->
  <p>{{ isLoggedIn ? '欢迎回来' : '请登录' }}</p>  <!-- 欢迎回来 -->

  <!-- 逻辑运算符 -->
  <p>{{ count > 3 && '大于3' }}</p>            <!-- 大于3 -->

  <!-- 调用数组方法 -->
  <p>{{ items.filter(i => i.includes('果')).join('、') }}</p>  <!-- 苹果、橙子 -->

  <!-- 调用字符串方法 -->
  <p>{{ user.role.toUpperCase() }}</p>        <!-- ADMIN -->

  <!-- 模板里的表达式 -->
  <p>{{ count > 10 ? '太多了' : '还好' }}</p>
</template>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

<script setup>
// 正确的做法：把 Math 处理结果放到模板能访问的地方
const now = new Date()
const randomNum = Math.floor(Math.random() * 100)  // 不要在模板里直接调用 Math.random()
// 更推荐的写法：
import { computed } from 'vue'
const PI = computed(() => 3.14159)
</script>

<template>
  <!-- ❌ 错误：在模板里调用 Math.random() 会产生副作用，每次渲染结果不一样 -->
  <!-- <p>{{ Math.random() }}</p> -->

  <!-- ✅ 正确：在 script 里计算好，再传给模板 -->
  <p>随机数：{{ randomNum }}</p>
  <p>圆周率：{{ PI }}</p>

  <!-- ❌ 错误：不能修改数据 -->
  <!-- {{ count++ }} 这样写会报错！修改数据要用方法 -->
</template>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

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

const role = ref('admin')
const score = ref(85)
const isLoading = ref(false)
</script>

<template>
  <!-- v-if：条件为 true 时渲染 -->
  <div v-if="isLoading">加载中...</div>

  <!-- v-else：和前一个 v-if 配对 -->
  <div v-else>加载完成</div>

  <!-- v-else-if：多重条件 -->
  <div v-if="role === 'admin'">管理员权限</div>
  <div v-else-if="role === 'editor'">编辑权限</div>
  <div v-else-if="role === 'user'">普通用户权限</div>
  <div v-else>访客权限</div>

  <!-- 配合 template 标签可以一次性控制多个元素 -->
  <template v-if="score >= 90">
    <p>成绩：{{ score }}</p>
    <p>评级：优秀 🎉</p>
  </template>

  <!-- 注意：v-if 和 v-else-if 之间不能有其他元素 -->
  <!-- 下面的写法是错误的： -->
  <!-- <div v-if="role === 'admin'">管理员</div> -->
  <!-- <span>中间插了一个元素</span> -->
  <!-- <div v-else>访客</div> -->
</template>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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

const isVisible = ref(true)
const showModal = ref(false)
</script>

<template>
  <!-- v-if：条件为 false 时，元素直接不存在于 DOM 中 -->
  <div v-if="isVisible">我会显示</div>
  <div v-if="!isVisible">我不会显示，DOM 里根本没有我</div>

  <!-- v-show：始终存在于 DOM，只是 CSS display 为 none -->
  <div v-show="isVisible">我用 v-show 控制</div>
  <div v-show="!isVisible" style="display: none;">我用 v-show 控制，DOM 里还在，只是看不见</div>

  <!-- 频繁切换的场景 —— 用 v-show -->
  <button @click="showModal = !showModal">切换弹窗</button>
  <div v-show="showModal" class="modal">这是一个弹窗</div>

  <!-- 条件很少变化、内容复杂的场景 —— 用 v-if -->
  <div v-if="Math.random() > 0.5">
    <p>复杂的嵌套内容，包含很多子元素</p>
    <p>{{ Math.random() }}</p>
    <img src="xxx" alt="xxx" />
  </div>
</template>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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

const tab = ref('login')
</script>

<template>
  <!-- 点击切换时，Vue 会认为这是不同的组件 -->
  <!-- 因为 key 不一样，所以会销毁旧的、创建新的（完全重置状态） -->
  <div v-if="tab === 'login'" key="login-form">
    <h2>登录</h2>
    <input placeholder="用户名" />
    <input type="password" placeholder="密码" />
  </div>
  <div v-else key="register-form">
    <h2>注册</h2>
    <input placeholder="用户名" />
    <input type="password" placeholder="密码" />
    <input type="email" placeholder="邮箱" />
  </div>

  <!-- 简写：如果不写 key，Vue 会尽量复用已有的 DOM 元素（性能更好） -->
  <!-- 写上 key，可以强制 Vue 不复用，重新创建 -->
</template>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

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

// 数组
const fruits = ref(['苹果', '香蕉', '橙子', '葡萄'])

// 对象
const person = ref({
  name: '小明',
  age: 25,
  city: '北京',
  hobby: '编程'
})

// 数字
const count = ref(5)

// 字符串
const text = ref('Hello')
</script>

<template>
  <!-- 遍历数组：item 是当前元素，index 是索引 -->
  <ul>
    <li v-for="(fruit, index) in fruits" :key="index">
      {{ index + 1 }}. {{ fruit }}
    </li>
  </ul>

  <!-- 遍历对象：value 是值，key 是属性名，index 是索引 -->
  <dl>
    <template v-for="(value, key, index) in person" :key="key">
      <dt>{{ key }}</dt>
      <dd>{{ value }}</dd>
    </template>
  </dl>

  <!-- 遍历数字：item 是从 1 到 n 的数字 -->
  <p>
    <span v-for="n in count" :key="n">{{ n }} </span>
  </p>

  <!-- 遍历字符串：item 是每个字符 -->
  <p>
    <span v-for="(char, i) in text" :key="i">{{ char }} </span>
  </p>
</template>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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

const users = ref([
  { id: 1, name: '张三', age: 25 },
  { id: 2, name: '李四', age: 30 },
  { id: 3, name: '王五', age: 28 }
])

function addUser() {
  users.value.unshift({ id: Date.now(), name: '新用户', age: 20 })
}
</script>

<template>
  <button @click="addUser">添加用户</button>

  <!-- key 必须唯一！不能用 index 作为 key 的场景后面会讲 -->
  <!-- 这里用 user.id，因为它是唯一的 -->
  <div v-for="user in users" :key="user.id">
    {{ user.name }} - {{ user.age }}岁
  </div>
</template>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

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

const colors = ref(['红', '绿', '蓝'])

function addColor() {
  // 末尾添加
  colors.value.push('黄')
}

function removeFirst() {
  // 头部删除
  colors.value.shift()
}

function insertSecond() {
  // 在索引1的位置插入一个元素（不删除）
  colors.value.splice(1, 0, '粉')
}

function replaceSecond() {
  // 在索引1的位置替换一个元素
  colors.value.splice(1, 1, '紫')
}

function reverseColors() {
  // 反转
  colors.value.reverse()
}

function sortColors() {
  // 排序（按 Unicode 编码排序）
  colors.value.sort()
}
</script>

<template>
  <p>当前颜色：{{ colors.join('、') }}</p>

  <button @click="addColor">添加黄色</button>
  <button @click="removeFirst">删除第一个</button>
  <button @click="insertSecond">在第二个位置插入粉色</button>
  <button @click="replaceSecond">把第二个替换成紫色</button>
  <button @click="reverseColors">反转顺序</button>
  <button @click="sortColors">排序</button>
</template>

1
2
3
4
5

// ❌ 错误：不会触发响应式更新
colors.value[0] = '新颜色'

// ✅ 正确：用 splice
colors.value.splice(0, 1, '新颜色')

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

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

const products = ref([
  { id: 1, name: 'iPhone 15', price: 7999, category: '手机' },
  { id: 2, name: 'MacBook Pro', price: 19999, category: '电脑' },
  { id: 3, name: 'AirPods Pro', price: 1899, category: '配件' },
  { id: 4, name: 'iPad Air', price: 4799, category: '平板' },
  { id: 5, name: 'Apple Watch', price: 2999, category: '手表' },
  { id: 6, name: '小米 14', price: 3999, category: '手机' }
])

const searchKeyword = ref('')
const sortBy = ref('default') // default | price-asc | price-desc

// 计算属性：根据关键词过滤 + 根据排序方式排序
const filteredProducts = computed(() => {
  let result = [...products.value]  // 先复制一份，避免修改原数组

  // 过滤
  if (searchKeyword.value) {
    result = result.filter(p =>
      p.name.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
      p.category.toLowerCase().includes(searchKeyword.value.toLowerCase())
    )
  }

  // 排序
  if (sortBy.value === 'price-asc') {
    result.sort((a, b) => a.price - b.price)
  } else if (sortBy.value === 'price-desc') {
    result.sort((a, b) => b.price - a.price)
  }

  return result
})
</script>

<template>
  <!-- 搜索框 -->
  <input v-model="searchKeyword" placeholder="搜索商品名称或分类..." />

  <!-- 排序选择 -->
  <select v-model="sortBy">
    <option value="default">默认顺序</option>
    <option value="price-asc">价格从低到高</option>
    <option value="price-desc">价格从高到低</option>
  </select>

  <!-- 商品列表 -->
  <div class="product-list">
    <div v-for="product in filteredProducts" :key="product.id" class="product-card">
      <h3>{{ product.name }}</h3>
      <p>分类：{{ product.category }}</p>
      <p class="price">￥{{ product.price.toLocaleString() }}</p>
    </div>
  </div>

  <!-- 没有结果时 -->
  <p v-if="filteredProducts.length === 0">没有找到匹配的商品</p>
</template>

<style scoped>
.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.product-card {
  border: 1px solid #ddd;
  padding: 12px;
  border-radius: 8px;
}

.price {
  color: #e63946;
  font-weight: bold;
}
</style>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<script setup>
function handleClick() {
  console.log('按钮被点击了！')
}

function handleInput(e) {
  console.log('输入了：', e.target.value)
}

function handleSubmit() {
  console.log('表单提交了')
}
</script>

<template>
  <!-- v-on:事件名="处理函数" -->
  <button v-on:click="handleClick">点我</button>

  <!-- @事件名 是 v-on:事件名 的简写，实际开发中更常用 -->
  <input @input="handleInput" placeholder="输入点东西..." />
  <form @submit.prevent="handleSubmit">
    <button type="submit">提交表单</button>
  </form>
</template>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

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

const count = ref(0)

// 方法处理器：把函数名当作事件处理函数
function increment() {
  count.value++
}

function greet(name) {
  console.log(`你好，${name}！`)
}
</script>

<template>
  <!-- 方法处理器：handleClick 是上面定义的函数 -->
  <button @click="increment">计数：{{ count }}</button>

  <!-- 内联处理器：直接在模板里写表达式，适合简单逻辑 -->
  <button @click="count++">内联方式 +1</button>

  <!-- 内联处理器也可以传参数 -->
  <button @click="greet('小明')">打招呼</button>

  <!-- 如果方法需要事件对象，用 $event -->
  <button @click="(e) => handleClick(e)">带事件对象</button>
  <!-- 或者用这种写法：Vue 会自动把事件对象作为第一个参数传入 -->
  <button @click="handleClick">传事件对象（另一种写法）</button>
</template>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

<script setup>
// 方法处理器 —— 逻辑复杂的时候用
function handleFormSubmit(e) {
  e.preventDefault()
  const formData = new FormData(e.target)
  console.log('用户名：', formData.get('username'))
  console.log('密码：', formData.get('password'))
  // 发送 API 请求...
}
</script>

<template>
  <form @submit.prevent="handleFormSubmit">
    <!-- .prevent 是事件修饰符，后面会讲 -->
    <input name="username" placeholder="用户名" />
    <input name="password" type="password" />
    <button type="submit">登录</button>
  </form>
</template>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<script setup>
function handleDivClick() {
  console.log('div 被点击了')
}

function handleBtnClick(e) {
  console.log('按钮被点击了')
}

function handleLinkClick() {
  console.log('链接被点击了')
}
</script>

<template>
  <!-- .stop —— 阻止事件冒泡 -->
  <!-- 点击按钮时，不会触发 div 的点击事件 -->
  <div @click="handleDivClick">
    <button @click.stop="handleBtnClick">点我（不会冒泡到 div）</button>
  </div>

  <!-- .prevent —— 阻止默认行为 -->
  <!-- 点击链接不会跳转到 href 的地址 -->
  <a href="https://example.com" @click.prevent="handleLinkClick">点击我不跳转</a>

  <!-- .self —— 只有点击元素自身时才触发（子元素的不算） -->
  <div @click.self="handleDivClick">
    <p>里面的内容</p>
    <button>按钮</button>
    <!-- 点击按钮会冒泡到 div，但 .self 不会触发 -->
    <!-- 只有直接点击 div 本身才会触发 -->
  </div>

  <!-- .once —— 事件只触发一次 -->
  <button @click.once="handleBtnClick">只触发一次</button>

  <!-- .passive —— 提升滚动性能，scroll 事件不会阻塞页面 -->
  <!-- 特别适合 window.addEventListener('scroll', handler, { passive: true }) -->
  <div @scroll.passive="handleScroll" class="scrollable-box">
    大量的内容...
  </div>
</template>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<script setup>
function handleEnter() {
  console.log('用户按了回车键')
}

function handleEsc() {
  console.log('用户按了退出键')
}

function handleSpace() {
  console.log('用户按了空格键')
}
</script>

<template>
  <!-- 按下回车键时触发 -->
  <input @keydown.enter="handleEnter" placeholder="按回车提交..." />

  <!-- 按下 Esc 时触发 -->
  <input @keydown.esc="handleEsc" placeholder="按 Esc 清空..." />

  <!-- 按下空格键时触发 -->
  <button @keydown.space="handleSpace">按空格键</button>

  <!-- 任意按键 —— .exact 修饰符（精确修饰符） -->
  <!-- 只有 Ctrl + Enter 时才触发，Ctrl + 其他键不会触发 -->
  <textarea @keydown.ctrl.enter="handleCtrlEnter"></textarea>
</template>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<script setup>
function handleSave() {
  console.log('Ctrl + S 保存快捷键触发了！')
}

function handleCopy() {
  console.log('Ctrl + C 复制触发了！')
}

function handleRightClick() {
  console.log('右键菜单')
}

// .exact —— 精确匹配修饰符
// 只有 Ctrl+Shift+Z 时触发，单独 Ctrl 或单独 Shift 都不行
function handleRedo() {
  console.log('Ctrl + Shift + Z (重做)')
}
</script>

<template>
  <!-- Ctrl + S -->
  <div @keydown.ctrl.s.prevent="handleSave">
    按住 Ctrl 再按 S（页面级快捷键）
  </div>

  <!-- Shift + 单击 —— 经常用于多选 -->
  <button @click.shift="handleShiftClick">Shift + Click（多选模式）</button>

  <!-- Alt + Enter -->
  <textarea @keydown.alt.enter="handleAltEnter"></textarea>

  <!-- .exact —— 精确组合 -->
  <button @click.exact="handleExactClick">只有在没有任何修饰键时才触发</button>

  <!-- 右键点击（自定义右键菜单） -->
  <div @contextmenu.prevent="handleRightClick">右键点击我</div>
</template>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

<script setup>
function handleLeftClick() {
  console.log('鼠标左键点击')
}

function handleRightClick(e) {
  e.preventDefault()  // 阻止默认右键菜单
  console.log('鼠标右键点击')
}

function handleMiddleClick() {
  console.log('鼠标中键点击（滚轮点击）')
}
</script>

<template>
  <button @click.left="handleLeftClick">左键点击我</button>
  <button @click.right.prevent="handleRightClick">右键点击我</button>
  <button @click.middle="handleMiddleClick">中键点击我</button>
</template>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

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

// v-model 会自动把用户输入的值同步到这些 ref 上
const username = ref('')
const email = ref('')
const password = ref('')
const gender = ref('')
const subscribe = ref(false)
const city = ref('')

function handleSubmit() {
  console.log('用户名：', username.value)
  console.log('邮箱：', email.value)
  console.log('密码：', password.value)
  console.log('性别：', gender.value)
  console.log('订阅：', subscribe.value)
  console.log('城市：', city.value)
}
</script>

<template>
  <form @submit.prevent="handleSubmit">
    <!-- 文本输入 -->
    <input v-model="username" placeholder="用户名" type="text" />
    <!-- 等价于：<input :value="username" @input="username = $event.target.value" /> -->

    <!-- 邮箱输入 -->
    <input v-model="email" placeholder="邮箱" type="email" />

    <!-- 密码输入 -->
    <input v-model="password" placeholder="密码" type="password" />

    <!-- 单选框 -->
    <div>
      <label><input type="radio" v-model="gender" value="male" /> 男</label>
      <label><input type="radio" v-model="gender" value="female" /> 女</label>
      <label><input type="radio" v-model="gender" value="other" /> 其他</label>
    </div>

    <!-- 复选框 -->
    <label>
      <input type="checkbox" v-model="subscribe" />
      订阅我们的 newsletter
    </label>

    <!-- 下拉选择 -->
    <select v-model="city">
      <option value="">请选择城市</option>
      <option value="beijing">北京</option>
      <option value="shanghai">上海</option>
      <option value="shenzhen">深圳</option>
    </select>

    <button type="submit">提交</button>
  </form>
</template>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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

// .lazy —— 失去焦点或按回车时才更新（不实时同步）
const lazyInput = ref('')

// .number —— 自动把输入转成数字（如果能转的话）
const numericInput = ref<number>(0)

// .trim —— 自动去除首尾空格
const trimmedInput = ref('')
</script>

<template>
  <!-- .lazy：只在 change 事件时更新（适合大文本输入，减少更新次数） -->
  <textarea v-model.lazy="lazyInput" placeholder="输入后失去焦点才更新..."></textarea>
  <p>当前值：{{ lazyInput }}</p>

  <!-- .number：把输入自动转成数字类型 -->
  <!-- 如果输入的不是数字，保留原值 -->
  <input v-model.number="numericInput" type="text" placeholder="输入数字..." />
  <p>类型：{{ typeof numericInput }}，值：{{ numericInput }}</p>

  <!-- .trim：自动 trim 掉首尾空格 -->
  <input v-model.trim="trimmedInput" placeholder="输入带空格的文本..." />
  <p>去空格后：'{{ trimmedInput }}'</p>
</template>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

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

const firstName = ref('')
const lastName = ref('')
const email = ref('')
</script>

<template>
  <!-- 一个组件上可以绑定多个 v-model -->
  <!-- 每个 v-model 绑定一个独立的数据 -->
  <UserForm
    v-model:first-name="firstName"
    v-model:last-name="lastName"
    v-model:email="email"
  />

  <p>完整姓名：{{ firstName }} {{ lastName }}</p>
  <p>邮箱：{{ email }}</p>
</template>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<!-- UserForm.vue -->
<script setup>
// Vue 3.4+ 推荐写法：直接用 defineModel，无需额外 defineProps
// defineModel 会自动声明对应的 props，并返回响应式 ref
const firstName = defineModel('firstName')
const lastName = defineModel('lastName')
const email = defineModel('email')
</script>

<template>
  <input v-model="firstName" placeholder="名" />
  <input v-model="lastName" placeholder="姓" />
  <input v-model="email" placeholder="邮箱" />
</template>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

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

const isActive = ref(true)
const hasError = ref(false)

// 多个 class 条件
const classObject = ref({
  active: true,
  'text-danger': false,
  highlighted: true
})

// 数组语法：把所有可能的 class 放在数组里
const activeClass = 'active'
const errorClass = 'text-danger'
const sizeClass = 'large'
</script>

<template>
  <!-- 对象语法：{ class名: 布尔值 } -->
  <!-- 当布尔值为 true 时，这个 class 会被应用 -->
  <div :class="{ active: isActive, 'text-danger': hasError }">
    对象语法绑定 class
  </div>

  <!-- 引用一个计算属性或 data 里的对象 -->
  <div :class="classObject">使用 classObject</div>

  <!-- 数组语法：把要应用的 class 放在数组里 -->
  <!-- 数组里的表达式值为 false/null/undefined 时，对应的 class 不应用 -->
  <div :class="[activeClass, errorClass, sizeClass]">数组语法绑定 class</div>

  <!-- 数组 + 三元表达式 -->
  <div :class="[isActive ? 'active' : '', errorClass]">混合用法</div>

  <!-- 在普通 class 基础上动态绑定 -->
  <div class="base-class" :class="{ active: isActive }">
    基础 class + 动态 class
  </div>
</template>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

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

const activeColor = 'red'
const fontSize = 30

// style 对象语法：CSS 属性用驼峰命名
const styleObject = ref({
  color: 'blue',
  fontSize: '20px',
  backgroundColor: '#f0f0f0'
})
</script>

<template>
  <!-- style 对象语法 -->
  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">
    动态内联样式（对象语法）
  </div>

  <!-- 直接引用 style 对象 -->
  <div :style="styleObject">使用 styleObject</div>

  <!-- 数组语法：多个 style 对象合并 -->
  <div :style="[styleObject, { fontWeight: 'bold' }]">
    合并多个 style 对象
  </div>

  <!-- 给 CSS 属性加浏览器前缀时，Vue 会自动处理 -->
  <!-- transform: translateX(10px) → 在对象里写 transform: 'translateX(10px)' -->
  <div :style="{ transform: 'rotate(45deg)' }">旋转 45 度</div>
</template>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

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

const isDisabled = ref(false)
const buttonType = ref('primary')  // primary | danger | success
const isLoading = ref(false)
</script>

<template>
  <!-- 根据 isDisabled 动态添加 disabled class -->
  <button
    :class="{ disabled: isDisabled, loading: isLoading }"
    :disabled="isDisabled || isLoading"
  >
    {{ isLoading ? '加载中...' : '提交' }}
  </button>

  <!-- 根据 buttonType 应用不同颜色 -->
  <button :class="['btn', `btn-${buttonType}`]">
    {{ buttonType }} 按钮
  </button>

  <!-- 常见用法：列表项的奇偶行不同样式 -->
  <ul>
    <li
      v-for="(item, index) in items"
      :key="item.id"
      :class="{ 'list-item': true, 'list-item-even': index % 2 === 0 }"
    >
      {{ item.name }}
    </li>
  </ul>
</template>

<style scoped>
.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-primary { background: #42b883; color: white; }
.btn-danger { background: #e63946; color: white; }
.btn-success { background: #2a9d8f; color: white; }

.disabled { opacity: 0.5; cursor: not-allowed; }
.loading { opacity: 0.7; cursor: wait; }
</style>