vue前端面试刷题练习2 峰峰博客

关注

原创最新推荐文章于 2026-09-30 13:30:04 发布 7.2k 阅读 AI 写同款· GEO 优化 ›

5.Vue.js前端框架：样式绑定 5.1 class 属性绑定在样式绑定中，首先是对元素的 class 属性进行绑定，绑定的数据可以是对象或数组。 5.1.1 对象语法在应用 v-bind 对元素的 class 属性进行绑定时，可以将绑定的数据设置为一个对象，从而动态地切换元素的 class。将元素的 class 属性绑定为对象主要有以下三种形式。 1. 内联绑定内联绑定即将元素的 class 属性直接绑定为对象的形式，格式如下： <div v-bind : class="{active :isActive}" 阅读详情

选择题

1．在DOM文档渲染完毕之后调用的钩子是（ C ）。

A．beforeCreate                       B．created
C．mounted                            D．destroyed

2．在Vue.js中，列表渲染使用的是（ B ）指令。

A．v-on			B．v-for			C．v-if			D．v-model

3．如果在内联语句中需要获取原生的DOM事件对象，可以将特殊变量（ A ）传入方法中。

A．$event			B．$this			C．event 			D．this

4．下列哪个不是Vue.js为v-model指令提供的修饰符？（ C ）

A．lazy  		B．number  			C．self  		D．trim

5．如果想在某个组件的根元素上监听一个原生事件，可以使用v-on的（ B ）修饰符。

A．.self 			B．.native			C．. capture		D．.once

6．运行以下代码，页面中的输出结果是（ B ）。

<div id="box">
	<div v-if="score>=90">一等</div>
	<div v-else-if="score>=75">二等</div>
	<div v-else-if="score>=60">三等</div>
	<div v-else>四等</div>
</div>
<script type="text/javascript">
    var demo = new Vue({
        el : '#box',
        data : {
			score : 80
		}
    });
</script>

A．一等  	B．二等  	C．三等  	D．四等

7．下列代码中，横线处的正确写法是（ A ）。

<div id="example">
	<my-component myMusic="没离开过"></my-component>
</div>
<script type="text/javascript">
var vm = new Vue({
	el : '#example',
	components : {
		'my-component' : {
			props : ['______'],
			template : '<p>{{______}}</p>'
		}
	}
})
</script>

A．mymusic    	B．myMusic   	C．my-music   	D． my-Music

8．在应用中加载图片文件需要使用（ A ）加载器。

A．file-loader 		B．css-loader 	C．style-loader     D．image-loader

9．在父组件监听自定义事件的时候，可以通过（ B ）访问到传递的参数值。

A．event 	B．$event 	C．$this 	D．$e

10．下面关于@vue/cli创建的项目中src目录下的文件夹或文件的描述不正确的是（ D ）。

A．assets文件夹用于存储静态资源，会被webpack构建
B．components文件夹用于存储公共组件
C．main.js是项目的入口文件
D．store.js是项目的路由配置文件

二、填空题

1．在Vue.js的指令中，修饰符是以`半角句点`符号指明的特殊后缀。

2．以下代码的运行结果是`假` 。

<div id="box">
	<p v-if="a==1">真</p>
	<p v-else>假</p>
</div>
<script type="text/javascript">
    var demo = new Vue({
        el : '#box',
        data : {
			a : 0
		}
    });
</script>

3．对元素的class属性进行绑定时，绑定的数据可以是`对象或数组`。

4．下列代码中，当单击“显示”按钮时在控制台输出Vue.js，将代码补充完整。

<div id="box">
	<button v-on:click="___`show(Vue.js)`___">显示</button>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el : '#box',
		methods : {
			show : function(str){
				console.log(str);
			}
		}
    });
</script>