模板语法与数据绑定专题

专题说明

本专题涵盖Vue.js的模板语法、插值表达式、指令系统以及数据绑定机制，包括v-bind、v-model、v-for等核心指令的使用。

学习目标

掌握Vue模板语法和插值表达式的使用
理解v-bind、v-model、v-for等核心指令的作用
掌握数据绑定的机制和应用场景

学习内容

模板语法与插值表达式
v-bind指令与动态绑定
v-model双向数据绑定
v-for列表渲染
条件渲染指令

学习建议

建议先阅读配套完整指南，理解Vue的模板语法和数据绑定机制后再开始答题，重点掌握各指令的使用场景。

📝 配套习题（11 题）

💡 参考答案在文末

判断题

Vue的插值表达式{{ }}中只能使用简单的变量名，不能使用JavaScript表达式。

对

错

v-if和v-show都能控制元素的显示与隐藏，它们的区别是v-if会真正地销毁和重建DOM元素。

对

错

单选题

在Vue模板中，用于显示数据的双大括号语法是什么？

<% message %>

${ message }

#{ message }

以下哪个指令用于绑定HTML元素的属性？

v-model

v-bind

v-on

v-html

v-model指令本质上是什么的语法糖？

v-bind:value和v-on:input

v-bind:change和v-on:change

v-bind:data和v-on:update

v-bind:checked和v-on:click

以下哪个是v-on指令的简写形式？

使用v-for遍历数组时，如何同时获取元素和索引？

v-for="(item, index) in items"

v-for="item, index in items"

v-for="items as (item, index)"

v-for="{item, index} in items"

v-show指令是如何实现元素显示与隐藏的？

通过CSS的display属性

通过CSS的visibility属性

通过CSS的opacity属性

通过从DOM中移除元素

多选题

关于v-bind绑定class和style，以下哪些说法是正确的？

可以通过对象语法绑定class，如{ active: isActive }

可以通过数组语法绑定class，如[activeClass, errorClass]

style绑定只支持对象语法

可以在绑定的对象中使用多个属性值

关于v-html和v-text指令，以下哪些说法是正确的？

v-html会将数据作为HTML解析并渲染

v-text会将数据作为纯文本渲染

v-html可能会带来XSS安全风险

v-text可以渲染HTML标签

填空题

Vue中用于条件渲染的指令有____________和____________,用于循环渲染列表的指令是____________。