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>
询探索)
函数)
)
)
