
一、选择题

1. Vue中用于双向数据绑定的指令是（【B】）
    A. v-bind
    B. v-model
    C. v-text
    D. v-html

2. 以下哪个指令用于条件渲染元素（【A】）
    A. v-if
    B. v-for
    C. v-show
    D. v-bind

3. v-bind指令的缩写形式是（【C】）
    A. @
    B. #
    C. :
    D. $

4. 用于监听DOM事件的指令是（【B】）
    A. v-model
    B. v-on
    C. v-bind
    D. v-click

5. v-on指令的缩写形式是（【A】）
    A. @
    B. :
    C. #
    D. $

6. 以下哪个指令用于循环渲染列表（【C】）
    A. v-if
    B. v-show
    C. v-for
    D. v-loop

7. v-for循环数组时，语法正确的是（【B】）
    A. <div v-for="item in list"></div>
    B. 以上A正确
    C. <div v-for="(item, index) of list"></div>
    D. <div v-for="list as item"></div>

8. v-for循环中，推荐设置的属性是（【A】）
    A. key
    B. id
    C. index
    D. name

9. v-if与v-show的主要区别是（【B】）
    A. v-if性能更好
    B. v-if会移除DOM元素，v-show仅隐藏
    C. v-show支持template标签
    D. v-if不能与v-else配合使用

10. 以下哪个指令用于渲染文本内容（不解析HTML）（【A】）
    A. v-text
    B. v-html
    C. v-model
    D. v-bind

11. 用于解析并渲染HTML内容的指令是（【B】）
    A. v-text
    B. v-html
    C. v-pre
    D. v-cloak

12. 以下哪个指令可以阻止元素及其子元素被Vue编译（【C】）
    A. v-cloak
    B. v-once
    C. v-pre
    D. v-stop

13. v-cloak指令的作用是（【A】）
    A. 防止页面加载时显示未编译的Mustache标签
    B. 只渲染元素一次
    C. 阻止事件冒泡
    D. 绑定CSS类名

14. v-once指令的特点是（【B】）
    A. 每次数据更新都会重新渲染
    B. 只渲染元素和组件一次，之后数据更新不影响
    C. 与v-if功能相同
    D. 用于循环渲染

15. 为v-bind:class传递对象时，语法正确的是（【A】）
    A. <div v-bind:class="{ active: isActive }"></div>
    B. <div v-bind:class="[active, isActive]"></div>
    C. <div v-bind:class="active: isActive"></div>
    D. <div v-bind:class="active = isActive"></div>

16. v-bind:style可以接收的类型是（【C】）
    A. 仅字符串
    B. 仅数组
    C. 对象或数组
    D. 仅函数

17. 以下哪个是v-on事件修饰符，用于阻止事件冒泡（【B】）
    A. .prevent
    B. .stop
    C. .self
    D. .once

18. 用于阻止默认事件的v-on修饰符是（【A】）
    A. .prevent
    B. .stop
    C. .capture
    D. .self

19. v-on的.once修饰符作用是（【C】）
    A. 事件只触发一次DOM更新
    B. 组件只渲染一次
    C. 事件只触发一次
    D. 阻止事件冒泡一次

20. 为v-model添加.lazy修饰符后，数据同步时机是（【B】）
    A. 实时同步
    B. 失去焦点或按下回车时
    C. 鼠标离开时
    D. 组件销毁时

21. v-model的.number修饰符作用是（【A】）
    A. 将输入值转为数字类型
    B. 限制输入数字个数
    C. 只允许输入数字
    D. 格式化数字为指定小数位

22. v-model的.trim修饰符作用是（【C】）
    A. 移除所有空格
    B. 只保留首尾空格
    C. 移除首尾空格
    D. 将空格替换为换行

23. 以下哪个指令用于在元素插入到DOM后执行操作（【D】）
    A. v-on:load
    B. v-bind:mounted
    C. v-ready
    D. 无专门指令，需用生命周期钩子

24. 对于复选框，v-model绑定的值类型是（【B】）
    A. 字符串
    B. 布尔值或数组
    C. 数字
    D. 对象

25. 单选按钮组使用v-model时，绑定的值是（【A】）
    A. 选中项的value值
    B. 选中项的索引
    C. 布尔值true/false
    D. 选中项的文本内容

26. 下拉列表select使用v-model时，绑定的值来自（【B】）
    A. option的text内容
    B. option的value属性
    C. option的index
    D. option的id属性

27. v-for循环对象时，不可以获取的是（【D】）
    A. 值（value）
    B. 键（key）
    C. 索引（index）
    D. 对象的原型方法

28. 以下关于v-if和v-for优先级的说法正确的是（【A】）
    A. v-for优先级高于v-if
    B. v-if优先级高于v-for
    C. 优先级相同
    D. 优先级由Vue版本决定

29. 用于动态绑定HTML属性的指令是（【B】）
    A. v-on
    B. v-bind
    C. v-model
    D. v-attr

30. 以下哪个指令不能直接用于组件（【C】）
    A. v-bind
    B. v-on
    C. v-model（需组件内部实现）
    D. v-if

31. v-bind可以动态绑定的内容不包括（【D】）
    A. CSS类名
    B. 内联样式
    C. 自定义属性
    D. 事件处理函数

32. 以下哪个是v-on的事件修饰符，用于只当事件目标是当前元素时触发（【C】）
    A. .stop
    B. .prevent
    C. .self
    D. .capture

33. v-on的.capture修饰符作用是（【A】）
    A. 使用事件捕获模式
    B. 阻止事件捕获
    C. 只触发一次事件
    D. 反转事件冒泡方向

34. 对于textarea元素，v-model绑定的是其（【B】）
    A. innerHTML
    B. value
    C. textContent
    D. innerText

35. v-for循环时，key的作用是（【A】）
    A. 帮助Vue识别节点，提高更新效率
    B. 作为元素的ID属性
    C. 用于排序
    D. 必须与索引值相同

36. 以下v-for语法错误的是（【D】）
    A. <div v-for="(item, index) in arr" :key="index"></div>
    B. <div v-for="value in obj" :key="value"></div>
    C. <div v-for="(value, key) in obj" :key="key"></div>
    D. <div v-for="item of arr" key="item.id"></div>（缺少v-bind）

37. v-if可以与哪个指令配合使用（【B】）
    A. v-for
    B. v-else-if和v-else
    C. v-show
    D. v-once

38. 以下场景适合用v-show的是（【A】）
    A. 频繁切换显示/隐藏的元素
    B. 条件很少改变的元素
    C. 与v-for配合使用的元素
    D. 包含大量子元素的组件

39. 以下场景适合用v-if的是（【B】）
    A. 导航菜单的显示/隐藏
    B. 权限控制的内容（条件很少变化）
    C. 表单输入提示的显示/隐藏
    D. 标签页切换

40. v-text与{{}}（Mustache语法）的区别是（【C】）
    A. v-text解析HTML，{{}}不解析
    B. {{}}性能更好
    C. v-text会覆盖元素内所有内容，{{}}可插入到文本中
    D. v-text只在Vue 2中支持

41. 使用v-html可能带来的风险是（【A】）
    A. XSS攻击
    B. 性能下降
    C. 数据绑定失败
    D. 组件渲染错误

42. 以下哪个指令用于为元素绑定多个事件（【B】）
    A. v-bind
    B. v-on（可绑定多个事件，用对象语法）
    C. v-events
    D. v-multiple

43. v-on绑定多个事件的正确语法是（【A】）
    A. <div v-on="{ click: handleClick, mouseover: handleOver }"></div>
    B. <div v-on:click="handleClick" v-on:mouseover="handleOver"></div>
    C. 以上A和B都正确
    D. <div v-on="click, mouseover: handleEvent"></div>

44. 动态参数在v-bind中的用法正确的是（【B】）
    A. <div v-bind:['class' + suffix]="isActive"></div>
    B. <div v-bind:[attrName]="value"></div>
    C. <div v-bind:attrName="value"></div>
    D. <div v-bind:"attrName"="value"></div>

45. 动态事件名在v-on中的用法正确的是（【A】）
    A. <div v-on:[eventName]="handleEvent"></div>
    B. <div v-on:eventName="handleEvent"></div>
    C. <div v-on:{{eventName}}="handleEvent"></div>
    D. <div v-on:[eventName + 'click']="handleEvent"></div>

46. 动态参数的值不可以是（【D】）
    A. 字符串
    B. null（移除绑定）
    C. 布尔值（会被转换为字符串）
    D. 对象

47. v-model在单选按钮上绑定的默认值类型是（【A】）
    A. 字符串
    B. 布尔值
    C. 数字
    D. 对象

48. 多个复选框与v-model绑定时，绑定的值是（【B】）
    A. 布尔值
    B. 数组（包含选中项的value）
    C. 字符串（选中项value拼接）
    D. 数字（选中项数量）

49. 以下哪个不是v-model支持的表单元素（【D】）
    A. input
    B. select
    C. textarea
    D. div

50. v-bind:class接收数组时，数组元素可以是（【C】）
    A. 仅字符串
    B. 仅对象
    C. 字符串或对象
    D. 仅函数

51. 以下v-bind:style用法正确的是（【A】）
    A. <div v-bind:style="{ color: textColor, fontSize: '16px' }"></div>
    B. <div v-bind:style="color: textColor; fontSize: '16px'"></div>
    C. <div v-bind:style="[color: textColor, fontSize: '16px']"></div>
    D. <div v-bind:style="textColor, 16px"></div>

52. v-bind:style的数组语法用于（【B】）
    A. 绑定多个类名
    B. 合并多个样式对象
    C. 动态切换样式
    D. 条件渲染样式

53. v-on的按键修饰符中，用于监听回车键的是（【A】）
    A. .enter
    B. .return
    C. .enterKey
    D. .keyEnter

54. 监听ESC键的v-on修饰符是（【B】）
    A. .esc
    B. .escape
    C. .ESC
    D. .exit

55. 以下哪个是v-on的系统修饰符（【C】）
    A. .enter
    B. .tab
    C. .ctrl
    D. .space

56. v-on:click.ctrl的触发条件是（【A】）
    A. 按下Ctrl键同时点击
    B. 只点击，不按Ctrl
    C. 按下Ctrl键后松开再点击
    D. 点击后按下Ctrl键

57. v-model在select元素上，当multiple为true时，绑定的值类型是（【B】）
    A. 字符串
    B. 数组
    C. 布尔值
    D. 数字

58. 以下关于v-for和v-if同时使用的建议正确的是（【A】）
    A. 避免同时使用，可将v-if移到父元素或使用计算属性过滤
    B. 优先使用v-for，再用v-if
    C. 优先使用v-if，再用v-for
    D. 两者可以随意同时使用

59. v-pre指令作用于包含{{}}的元素时，会（【B】）
    A. 解析{{}}中的表达式
    B. 原样显示{{}}及内容
    C. 隐藏元素
    D. 只显示{{}}中的值

60. v-cloak需要配合哪种方式使用才能生效（【C】）
    A. JavaScript代码
    B. 组件生命周期
    C. CSS样式（如[v-cloak] { display: none; }）
    D. 其他指令

61. 以下哪个指令用于一次性插值，数据更新后不改变（【A】）
    A. v-once
    B. v-pre
    C. v-cloak
    D. v-static

62. v-on的.native修饰符作用是（【B】）
    A. 监听原生JavaScript事件
    B. 监听组件根元素的原生事件
    C. 阻止事件冒泡
    D. 只触发一次事件

63. 为自定义组件使用v-model时，组件内部需要（【A】）
    A. 接收value prop并触发input事件
    B. 定义model选项
    C. 使用v-bind.sync修饰符
    D. 实现双向绑定方法

64. Vue 3中，v-model的默认prop和事件是（【C】）
    A. value和input
    B. modelValue和change
    C. modelValue和update:modelValue
    D. data和update

65. v-bind的.sync修饰符作用是（【B】）
    A. 实现单向绑定
    B. 简化prop的双向绑定（语法糖）
    C. 与v-model功能相同
    D. 同步父组件和子组件的所有数据

66. 以下v-bind.sync用法正确的是（【A】）
    A. <child-component :title.sync="parentTitle"></child-component>
    B. <child-component v-bind.sync:title="parentTitle"></child-component>
    C. <child-component sync:title="parentTitle"></child-component>
    D. <child-component v-sync:title="parentTitle"></child-component>

67. v-for循环一个范围时，语法正确的是（【B】）
    A. <div v-for="n in 10" :key="n">{{n}}</div>
    B. 以上A正确
    C. <div v-for="n of 10" :key="n">{{n}}</div>
    D. <div v-for="10 as n" :key="n">{{n}}</div>

68. 以下哪个指令不支持条件判断（【D】）
    A. v-if
    B. v-else-if
    C. v-else
    D. v-for

69. v-if的条件为false时，元素会（【A】）
    A. 从DOM中移除
    B. 被设置display: none
    C. 被设置visibility: hidden
    D. 保留在DOM中但不渲染

70. v-show的条件为false时，元素会（【B】）
    A. 从DOM中移除
    B. 被设置display: none
    C. 被设置visibility: hidden
    D. 保留在DOM中但不渲染

71. 以下关于v-text和v-html的说法错误的是（【C】）
    A. 两者都会覆盖元素原有的内容
    B. v-html会解析HTML标签，v-text不会
    C. v-text比{{}}有更高的优先级
    D. v-html存在安全风险，不建议用于用户输入内容

72. v-on绑定事件时，事件处理函数的参数传递正确的是（【A】）
    A. <button v-on:click="handleClick(123, $event)"></button>
    B. <button v-on:click="handleClick(123, event)"></button>
    C. <button v-on:click="handleClick(123, e)"></button>
    D. <button v-on:click="handleClick(123, $e)"></button>

73. $event在事件处理中的作用是（【B】）
    A. 传递组件实例
    B. 传递原生事件对象
    C. 传递数据对象
    D. 触发父组件事件

74. v-bind绑定class时，数组语法中可以嵌套对象，用于（【A】）
    A. 条件性地添加类名
    B. 合并多个类名
    C. 动态生成类名
    D. 排序类名

75. 以下v-bind:class数组语法正确的是（【B】）
    A. <div v-bind:class="[activeClass, { error: isError }]"></div>
    B. 以上A正确
    C. <div v-bind:class="[activeClass, error: isError]"></div>
    D. <div v-bind:class="activeClass, { error: isError }"></div>

76. v-model在复选框上，当设置了value属性时，绑定的数组会包含（【A】）
    A. 选中项的value值
    B. 选中项的checked状态
    C. 选中项的索引
    D. 选中项的文本

77. 以下哪个不是v-on的按键修饰符（【D】）
    A. .tab
    B. .delete
    C. .space
    D. .scroll

78. v-on:keyup.delete的作用是（【B】）
    A. 监听删除按钮点击
    B. 监听删除键（Delete）抬起事件
    C. 阻止删除操作
    D. 删除事件绑定

79. Vue中，指令的参数可以是（【C】）
    A. 仅静态字符串
    B. 仅动态表达式
    C. 静态字符串或动态表达式
    D. 仅数字

80. 以下动态参数使用错误的是（【D】）
    A. <div v-bind:[attributeName]="value"></div>
    B. <div v-on:[eventName]="handleEvent"></div>
    C. <div v-bind:[`attr-${suffix}`]="value"></div>
    D. <div v-bind:[123]="value"></div>（参数不能是数字）

81. v-for循环对象时，第三个参数是（【C】）
    A. 值（value）
    B. 键（key）
    C. 索引（index）
    D. 对象本身

82. 以下v-for循环对象的语法正确的是（【A】）
    A. <div v-for="(value, key, index) in obj" :key="key"></div>
    B. <div v-for="(key, value, index) in obj" :key="key"></div>
    C. <div v-for="(index, key, value) in obj" :key="index"></div>
    D. <div v-for="obj as (value, key)" :key="key"></div>

83. v-if和v-else-if、v-else之间（【B】）
    A. 可以有其他元素
    B. 不能有其他元素，必须连续
    C. 可以有注释
    D. 可以有v-for元素

84. 以下v-if和v-else使用正确的是（【A】）
    A. 
    <div v-if="isTrue">True</div>
    <div v-else>False</div>
    B. 
    <div v-if="isTrue">True</div>
    <p>其他内容</p>
    <div v-else>False</div>
    C. 
    <div v-if="isTrue">True</div>
    <div v-else-if="isFalse">False</div>
    <p>其他内容</p>
    <div v-else>Other</div>
    D. 
    <div v-if="isTrue">True</div>
    <div v-else="isFalse">False</div>

85. v-model在单选按钮组中，绑定的值为undefined时，会（【B】）
    A. 选中第一个单选按钮
    B. 没有选中的单选按钮
    C. 选中所有单选按钮
    D. 报错

86. 以下关于v-for中key的说法错误的是（【D】）
    A. key的值应唯一
    B. 不建议用索引作为key
    C. key可以提高列表更新效率
    D. key会被渲染为DOM元素的属性

87. v-bind:style中，CSS属性名可以使用的写法是（【C】）
    A. 仅驼峰式（如fontSize）
    B. 仅短横线式（如font-size）
    C. 驼峰式或短横线式（需加引号）
    D. 仅大写形式

88. 以下v-bind:style短横线式写法正确的是（【A】）
    A. <div v-bind:style="{'font-size': '16px'}"></div>
    B. <div v-bind:style="{font-size: '16px'}"></div>
    C. <div v-bind:style="font-size: '16px'"></div>
    D. <div v-bind:style="['font-size: 16px']"></div>

89. v-on的修饰符可以（【A】）
    A. 链式使用（如@click.stop.prevent）
    B. 只能使用一个
    C. 必须按固定顺序使用
    D. 不能用于自定义事件

90. @click.stop.prevent的作用是（【B】）
    A. 只阻止事件冒泡
    B. 同时阻止事件冒泡和默认事件
    C. 只阻止默认事件
    D. 先阻止默认事件，再阻止冒泡

91. v-model在复选框上不设置value时，绑定的值类型是（【A】）
    A. 布尔值
    B. 字符串
    C. 数组
    D. 数字

92. 以下哪个指令用于绑定组件的props（【B】）
    A. v-model
    B. v-bind
    C. v-on
    D. v-prop

93. 为组件绑定自定义事件的指令是（【C】）
    A. v-bind
    B. v-model
    C. v-on
    D. v-event

94. 以下关于v-pre的说法正确的是（【A】）
    A. 子元素也会被跳过编译
    B. 只跳过当前元素，不影响子元素
    C. 会解析v-bind指令
    D. 会触发组件的生命周期

95. v-cloak在Vue实例编译完成后会（【B】）
    A. 保留在元素上
    B. 从元素上移除
    C. 改为v-cloaked
    D. 触发事件

96. v-once作用于组件时，会（【A】）
    A. 组件只渲染一次，之后props更新不影响
    B. 组件不渲染
    C. 组件会被缓存
    D. 组件会被销毁

97. 以下哪个指令不是Vue的核心指令（【D】）
    A. v-if
    B. v-for
    C. v-bind
    D. v-lazy（通常是自定义或第三方指令）

98. v-model的.lazy修饰符适用于（【A】）
    A. input和textarea
    B. select
    C. 复选框
    D. 单选按钮

99. 以下v-for循环字符串的语法正确的是（【B】）
    A. <div v-for="char in 'hello'" :key="char">{{char}}</div>
    B. 以上A正确
    C. <div v-for="char of 'hello'" :key="char">{{char}}</div>
    D. <div v-for="char in 'hello'">{{char}}</div>（缺少key）

100. 以下关于Vue指令的说法错误的是（【C】）
    A. 指令是带有v-前缀的特殊属性
    B. 指令的职责是当表达式的值改变时，响应式地作用于DOM
    C. 所有指令都必须有参数
    D. 指令可以有修饰符


二、填空题

1. Vue中，【v-model】指令用于在表单元素上创建双向数据绑定。
2. v-bind指令的缩写是【:】，用于动态绑定HTML属性。
3. 【v-on】指令用于监听DOM事件，其缩写形式是@。
4. v-for循环时，为了提高列表更新性能，推荐为每项设置【key】属性。
5. v-if和v-show都用于条件显示元素，其中【v-if】会直接移除或插入DOM元素。
6. 【v-text】指令用于渲染文本内容，不会解析HTML标签。
7. 用于解析并渲染HTML内容的指令是【v-html】，但需注意XSS安全风险。
8. 【v-pre】指令可以阻止Vue编译元素及其子元素，原样显示Mustache标签。
9. v-cloak指令需配合【CSS样式】（如[v-cloak] { display: none; }）使用，防止页面加载时显示未编译的模板。
10. 【v-once】指令使元素或组件只渲染一次，之后数据更新不会重新渲染。
11. v-on的【.stop】修饰符用于阻止事件冒泡。
12. 阻止默认事件的v-on修饰符是【.prevent】。
13. v-model的【.number】修饰符可以将用户输入的值自动转换为数字类型。
14. v-for循环对象时，可以依次获取对象的【值（value）】、键（key）和索引（index）。
15. v-bind:class可以接收【对象】或数组形式的参数，用于动态设置类名。
16. v-if可以与【v-else-if】和v-else配合使用，实现多条件判断。
17. 对于频繁切换显示状态的元素，推荐使用【v-show】指令以提高性能。
18. v-on的动态事件名语法是v-on:[【eventName】]，其中eventName是数据属性。
19. 多个复选框与v-model绑定时，v-model绑定的是一个【数组】，包含选中项的value值。
20. Vue指令的修饰符以【.】开头，用于限定指令的行为（如.stop、.prevent）。