vue期末复习选择题5

1. 有如下组件代码：

 <template>
     <input type="text" v-model.number="count">
     <p>{{count}}乘以2的值为:{{plus}}</p>
</template>

<script setup>
    import { ref,computed} from 'vue'
    const count = ref(1)
    const plus =_________(() => {
        return count.value* 2;
    })
</script>

从下面选项中选择合适的选项补充完整代码，页面中实时显示文本框输入数据乘以2之后的结果。（D）

• A. watch
• B. filters
• C. methods
• D. computed

[!NOTE]

这里的 computed 是 Vue 提供的一个属性，它用于创建一个计算属性。计算属性的值是根据其他属性的值动态计算得出的，并且会根据其依赖进行缓存，只有在相关依赖发生改变时才会重新计算。在这个例子中，plus 就是一个计算属性，它依赖于 count 的值，每当 count 的值发生变化时，plus 的值会自动重新计算。

其他选项的作用如下：

• A. watch：用于监听某个属性的变化，当属性发生变化时执行相应的回调函数。
• B. filters：用于在模板中对数据进行过滤处理，常用于文本格式化。
• C. methods：用于定义组件中的方法，可以在模板中调用这些方法执行相应的操作。

2. 在Vue中的哪个方法可以定义计算属性？（D）

• A. filters
• B. methods
• C. watch
• D. computed

3. 有如下组件代码：

<template>
    <input type="text" v-model.number="count">
    <p>{{ count }}乘以2的值为:{{ plus }}</p>
</template>
<script setup>
    import { ref, watch } from 'vue'
    const count = ref(1)
    const plus = ref('')
    _______(count, () => {
        plus.value = 2 * count.value
    }, {
        immediate: true 
    })
</script>

从下面选项中选择合适的选项补充完整代码，页面中实时显示文本框输入数据乘以2之后的结果。（B）

• A. filters
• B. watch
• C. computed
• D. methods

4. 有如下组件代码：

<template>
    <input type="text" v-model.number="count">
    <p>{{count}}乘以2的值为:{{plus()}}</p>
</template>

<script setup>
    import { ref } from 'vue'
    const count = ref(1)const plus = () => {
        ________ count.value * 2;
    }
</script>

从下面选项中选择合适的选项补充完整代码，页面中实时显示文本框输入数据乘以2之后的结果。（ C ）

• A. enter
• B. watch
• C. return
• D. computed

5. 有CSS样式如下：

.cc{
    color:red;
    background-color:yellow
}

下面代码中哪一个选项不可以使cc样式起作用？（D）

• A. <p :class= {cc:true} >洛阳牡丹甲天下，花开时节动京城</p>
• B. <p class="cc">洛阳牡丹甲天下，花开时节动京城</p>
• C. <p :class= {cc：25>20} >洛阳牡丹甲天下，花开时节动京城</p>
• D. <p :class="20>25?'cc':''">洛阳牡丹甲天下，花开时节动京城</p>

[!NOTE]

因为条件表达式 20 > 25 是不成立的，所以结果为 false，导致绑定的类名为 ''，没有任何类被添加到 <p> 元素上，因此 .cc 样式不会被应用。

6. 在Vue中的哪个方法是侦听器？（B）

• A. map
• B. watch
• C. computed
• D. filters

二. 多选题（共3题，33.4分）

7. 下面关于计算属性说法正确的有哪些？（ABCDE）

• A. 计算属性所依赖的数据发生变化，计算属性才会重新计算。
• B. 计算属性的本质是就是一个方法。
• C. 在使用时将它们看成普通属性去使用，不会当做方法去调用。
• D. 利用computed方法定义属性，这属性称为计算属性。
• E. 计算属性的计算结果会被缓存起来，方便下次使用。

8. 有如下css样式的定义：

<style>
    .red{
        color:red;
    }

    .thin{
        font-weight: 200;
    }

    .italic{
        font-style: italic;
    }

    .active{
        letter-spacing: 0.5em;
    }
</style>

下面实现将样式绑定到元素上写法正确的有哪些选项。（ABCDE）

• A. <h1 :class= ['red','thin',{'italic':flag}] >河南科技大学</h1>（其中flag是定义在Vue的实例中的数据）
• B. <h1 class="red thin">河南科技大学</h1>
• C. <h1 :class= ['red','thin',flag?'active':''] >河南科技大学</h1>（其中flag是定义在Vue的实例中的数据）
• D. <h1 :class="classObj">河南科技大学</h1>（其中classObj是定义在Vue的实例中的对象例如：classObj：{red:true,thin:true,italic:true,active:true}）
• E. <h1 :class= ['red','thin'] >河南科技大学</h1>

9. 下面利用元素的style属性实现CSS样式绑定的写法正确的有哪些？（ABCD）

• A. <p style="color:red;font-size:30px">河南科技大学</p>
• B. <p :style= [{'color':'red'},{'font-size':'40px','font-style':'italic'}] >河南科技大学</p>
• C. <p :style="styleArr">河南科技大学</p>（其中styleArr是定义在Vue实例中的数据如：styleArr:[{‘color’:‘red’},{‘font-size’:‘40px’}]）
• D. <p :style= {'color':col,'font-size':size+'px'} >河南科技大学</p>（其中col、size是定义在Vue实例中的数据）
• E. <p :style= {'color':'red','font-size':'40px'} >河南科技大学</p>