vue期末复习选择题4

丁小喜

于 2024-05-24 22:36:13 发布

阅读量761

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_73922932/article/details/139185961

版权

1. 有如下vue组件，实现一个简易计算器：

<template>
    <input type="text" _____(1)_____>
    <select _____(2)_____>
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" _____(3)_____>
    <input type="button" value="=" @click ="calc">
    <input type="text" _____(4)_____>
</template>
<script setup>
    import {ref} from 'vue'
    const n1=ref(0)
    const n2=ref(0)
    const result=ref(0)
    const opt=ref('+')
    const calc=()=>{
        switch(_____(5)_____){
            case "+":result.value=parseInt(n1.value)+parseInt(n2.value);break;
            case "-":result.value=parseInt(n1.value)-parseInt(n2.value);break;
            case "*":result.value=parseInt(n1.value)*parseInt(n2.value);break;
            case "/":result.value=parseInt(n1.value)/parseInt(n2.value);break;
        }
    }
</script>

从下面选出正确答案补充完整程序，运行效果如下。（C）

A.

(1) v-model="n1"

(2) v-model="opt"

(3) v-bind:value="n2"

(4) :value="result"

(5) opt
B.

(1) v-model="n1"

(2) :value="opt"

(3) v-model="n2"

(4) :value="result"

(5) opt
C.

(1) v-model="n1"

(2) v-model="opt"

(3) v-model="n2"

(4) v-bind:value="result"

(5) opt
D.

(1) :value="n1"

(2) v-model="opt"

(3) v-model="n2"

(4) :value="result"

(5) opt

2. 用v-model指令将多选下拉框绑定在一个数组上，当选中某个选项时，如果该option选项设置有value属性，则将什么内容添加到数组中。（D）

A. option标记的value属性值和option标记中的文本
B. option标记中的文本
C. select标记的id属性
D. option标记的value属性值

[!NOTE]

3. 下面哪一个不是Vue中的指令？（A）

A. setup
B. v-html
C. v-on
D. v-text

[!NOTE]

setup不是Vue中的指令，而是Vue3中设置用于设置组件选项的函数。

4. 下面关于v-show与v-if指令说法是错误的是哪一个？（B）

A. v-if指令根据后面的表达式的值的真假(true或false)，切换元素的显示和隐藏，但它操作的是DOM元素本身， true时元素存在DOM树中，false时元素从DOM树中移除。
B. v-else可以与v-show和v-if指令配合使用。
C. v-show指令根据后面的表达式结果的真假(true或false)，切换元素的显示和隐藏，true显示，false隐藏，原理是修改元素的display属性实现显示或隐藏。
D. 具体使用时频繁切换用v-show,反之用v-if ，前者切换消耗少。

[!NOTE]

v-show与v-else无法配合使用。

5. 在Vue中,能够实现给img元素绑定src属性的代码是( D )。

A. v-html:src
B. {{src}}
C. @src
D. v-bind:src

[!NOTE]

当涉及Vue中的属性绑定时，以下是选项的解释：

A. v-html:src：指令用于将数据作为 HTML 插入到元素中，但它并不适用于绑定元素的 src 属性。

B. {{src}}：这是 Vue 中用于插值的语法，用于将数据输出到文本内容中。但它不会将数据绑定到元素的属性上，因此不能用于给 img 元素绑定 src 属性。

C. @src：@ 符号通常用于绑定事件处理程序，而不是用于绑定元素的属性。

D. v-bind:src：v-bind 指令用于动态地将 Vue 实例的数据绑定到 HTML 属性上。在这种情况下，使用 v-bind:src 可以将 Vue 实例中的 src 数据绑定到 img 元素的 src 属性上，实现动态渲染图片。

6. 下面哪一个指令可以实现表单元素的数据的双向绑定？（C）

A. v-on
B. v-text
C. v-model
D. v-bind

[!NOTE]

A. v-on: 这个指令用于监听 DOM 事件，并在触发时执行指定的方法。例如，v-on:click 会在元素被点击时执行相应的方法。但是 v-on 并不用于实现双向数据绑定，它只是用来监听事件的。

B. v-text: 这个指令用于设置元素的文本内容，它会将指定的数据作为纯文本插入到元素中。它不会实现双向数据绑定，因为它只能将数据从组件实例渲染到 DOM，而不能反向将用户输入的数据同步到组件实例中。

C. v-model: 这个指令用于在表单元素和 Vue 实例的数据之间创建双向绑定。它可以应用在 input、textarea、select 等表单元素上，实现用户输入数据的同步更新到 Vue 实例中，并且将 Vue 实例中的数据变化同步更新到表单元素中。

D. v-bind: 这个指令用于动态地绑定 HTML 属性到 Vue 实例的数据。它可以绑定任何 HTML 属性，但不包括表单元素的值。因此，它不能实现表单元素的双向数据绑定。

7. 用v-model指令将多个复选框绑定到同一个数组上，当选中某个复选框时，将该复选框的哪一个属性值会存入该数组中。（B）

A. type
B. value
C. id
D. name

8. 在用v-for指令遍历对象object时的代码如下： v-for="(x,y,z) in object"下面说法正确的是哪一项？（A）

A. 变量x代表对象中的属性值，y代表对象中的属性，z代表属性在对象中的下标。
B. 变量x代表属性在对象中的下标，y代表对象中的属性值，z代表对象中的属性。
C. 变量x代表属性在对象中的下标，y代表对象中的属性，z代表对象中的属性值。
D. 变量x代表对象中的属性，y代表对象中的属性值，z代表属性在对象中的下标。

[!NOTE]

(属性值，属性，索引) in 数组

9. 文本插值是数据绑定的最基本形式，使用下面哪一个符号进行。（C）

A. []
B. {}
C. {{}}
D. <>

10. 有如下数据：

<script setup>
    import {ractive} from 'vue'
    const list=reactive([
        {province:"河南省",city:"郑州",spot:"少林寺"},
        {province:"河北省",city:"石家庄",spot:"北戴河"},
        {province:"安徽省",city:"合肥",spot:"黄山"},
        {province:"湖南省",city:"武汉",spot:"黄鹤楼"}
    ])
</script>

从下面选出正确的代码实现将list数组中的数据渲染到表格中，如下图所示：（B）

<table>
    <tr v-for="(x,y) in list">
        <td>{{y++}}</td>
        <td>{{x.province}}</td>
        <td>{{x.city}}</td>
        <td>{{x.spot}}</td>
    </tr>
</table>

<table>
    <tr><th>序号</th><th>省份</th><th>省会</th><th>旅游景点</th></tr>
    <tr v-for="(x,y) in list">
        <td>{{y+1}}</td>
        <td>{{x.province}}</td>
        <td>{{x.city}}</td>
        <td>{{x.spot}}</td>
    </tr>
</table>

<table>
    <tr><th>序号</th><th>省份</th><th>省会</th><th>旅游景点</th></tr>
    <tr v-for="x in list">
        <td>{{x+1}}</td>
        <td>{{province}}</td>
        <td>{{city}}</td>
        <td>{{spot}}</td>
    </tr>
</table>

<table>
    <tr><th>序号</th><th>省份</th><th>省会</th><th>旅游景点</th></tr>
    <tr v-for="(x,y) in list">
        <td>{{x+1}}</td>
        <td>{{y.province}}</td>
        <td>{{y.city}}</td>
        <td>{{y.spot}}</td>
    </tr>
</table>

11. 补充完整下面代码实现在表格中显示九九乘法表，如下图所示。（D）

<table>
    <tr v-for="---(1)----">
        <td v-for="----(2)----"> {{m}}*{{n}}={{m*n}} </td>
    </tr>
</table>

A.

(1)m in 9

(2)n in m
B.

(1)n in 9

(2)m in 9
C.

(1)n at 9

(2)m at n
D.

(1)n in 9

(2)m in n

12. 用v-for更新已渲染的元素列表的时候，会使用就地复用的策略；要强制其重新排序元素，需要在循环时给每一项用特殊属性来绑定一个唯一的标识，该属性是下面哪一个？（A）

A. key
B. alt
C. title
D. value

13. 有如下组件代码：

<template>
    <h2>城市名称：</h2>
    <ul>
        <li v-for="___________"> 索引:{{index}}-----数据:{{item}}</li>
    </ul>
</template>
<script setup>
    import { reacive } from 'vue'
    const arr = reactive(["北京","上海","深圳","广州","南京"])
</script>

从下面选出正确的答案补充完整程序，运行后结果如下图所示。（A）

A. (item,index) in arr
B. (item,index) at arr
C. (item,index) in data
D. (index,item) in arr

[!NOTE]

(元素，索引) in 数组

二. 多选题

14. 在Vue中利用v-for指令可以遍历下面哪些数据？（BCDE）

A. 布尔值
B. 数组
C. 对象
D. 字符串
E. 整数

15. 下面哪些是v-on指令的事件修饰符。（ABCDE）

A. .once
B. .self
C. .stop
D. .capture
E. .prevent

16. 下面哪些是Vue.js提供给键盘事件的修饰符。（ABCDE）

A. .esc
B. .left
C. .enter
D. .delet
E. .space

17. v-model指令可以用于下面哪些元素？（ABCDE）

A. <input type="text">
B. textarea
C. <input type="checkbox">
D. select
E. <input type="radio">

丁小喜

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
vue期末复习选择题4

这个指令用于设置元素的文本内容，它会将指定的数据作为纯文本插入到元素中。它不会实现双向数据绑定，因为它只能将数据从组件实例渲染到 DOM，而不能反向将用户输入的数据同步到组件实例中。等表单元素上，实现用户输入数据的同步更新到 Vue 实例中，并且将 Vue 实例中的数据变化同步更新到表单元素中。：这是 Vue 中用于插值的语法，用于将数据输出到文本内容中。：指令用于将数据作为 HTML 插入到元素中，但它并不适用于绑定元素的。符号通常用于绑定事件处理程序，而不是用于绑定元素的属性。
复制链接

扫一扫