指令习题.md

指令习题

使用版本 v1.0.26

多选题

第一题

如果我们想切换多个元素，下面哪些选项的用法是正确的？

new Vue({
    el: 'body',
    data: {
        isShow: false
    },
    ready(){
        setTimeout(() => {
            this.isShow = true;
        },2000)
    }
})

<!-- 选项A -->
<div v-if="isShow">1</div>
<div v-if="isShow">2</div>
<div v-if="isShow">...</div>

<!-- 选项B -->
<div v-show="isShow">1</div>
<div v-show="isShow">2</div>
<div v-show="isShow">...</div>

<!-- 选项C -->
<template v-if="isShow">
    <div>1</div>
    <div>2</div>
    <div>...</div>
</template>

<!-- 选项D -->
<template v-show="isShow">
    <div>1</div>
    <div>2</div>
    <div>...</div>
</template>

第二题

下面哪些选项能正常渲染？

new Vue({
    el: 'body',
    data: {
        modal:null
    },
    components: {
        'my-component': {
            template: '<div>MyComponent</div>'
        }
    },
    ready(){
        setTimeout(() => {
            this.modal = {
                a: 1
            };
        },2000)
    }
})

<!-- 选项A -->
<my-component v-show="modal"></my-component>
<p v-else>正在加载数据...</p>

<!-- 选项B -->
<div v-show="modal">{{modal.a}}</div>
<p v-else>正在加载数据...</p>

<!-- 选项C -->
<div v-if="modal">{{modal.a}}</div>
<p v-else="!modal">正在加载数据...</p>

<!-- 选项D -->
<div v-if="modal">{{modal.a}}</div>
<div></div>
<p v-else>正在加载数据...</p>

第三题

下面哪些选项能正常渲染出以下结果：

<div>1</div>
<div>2</div>
<div>3</div>

new Vue({
    el: 'body',
    data: {
        items:[1,2,3]
    }
})

<!-- 选项A -->
<div v-for="item in items">{{$index}}</div>

<!-- 选项B -->
<div v-for="(index, item) in items">{{index}}</div>

<!-- 选项C -->
<div v-for="item of items">{{item}}</div>

<!-- 选项D -->
<div v-for="item in 3">{{item}}</div>

第四题

下面哪些选项不属于 Vue.js 的内置指令

<!-- 选项A -->
v-text
<!-- 选项B -->
v-html
<!-- 选项C -->
v-if
<!-- 选项D -->
v-show
<!-- 选项E -->
v-else
<!-- 选项F -->
v-elseif
<!-- 选项G -->
v-on
<!-- 选项H -->
v-bind
<!-- 选项I -->
v-model
<!-- 选项J -->
v-ref
<!-- 选项K -->
v-el
<!-- 选项L -->
v-pre
<!-- 选项M -->
v-link
<!-- 选项N -->
v-cloak

第五题

下面哪些选项能正常渲染出以下结果：

<div class="a-1 b c"></div>

new Vue({
    el: 'body',
    data: {
        myclass:{
            b:true,
            c:true
        },
        bclass: 'b',
        cclass: 'c'
    }
})

<!-- 选项A -->
<div :class="a-1 b c"></div>

<!-- 选项B -->
<div :class="{'a-1': true, b: true, c: true}"></div>

<!-- 选项C -->
<div :class="[{'a-1': true}, myclass]"></div>

<!-- 选项D -->
<div :class="'a-1 '+ bclass + cclass"></div>