前端的口试题

Class 与 Style 如何动态绑定？

   

• 对象语法：
  

1. <div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
2. data: {
3.         isActive: true,
4.           hasError: false
5. }

复制代码

• 数组语法：
  

1. <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
2. data: {
3.   activeClass: 'active',
4.   errorClass: 'text-danger'
5. }

复制代码

    Style 也可以通过对象语法和数组语法进举措态绑定：
   

• 对象语法：
  

1. <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
2. data: {
3.   activeColor: 'red',
4.   fontSize: 30
5. }

复制代码

• 数组语法：vue-router 路由模式有几种？
  

1. <div v-bind:style="[styleColor, styleSize]"></div>
2. data: {
3.   styleColor: {
4.      color: 'red'
5.    },
6.   styleSize:{
7.      fontSize:'23px'
8.   }
9. }

复制代码

vue-router 路由模式有几种？

   vue-router 有 3 种路由模式：hash、history、abstract，对应的源码如下所示：

1. switch (mode) {
2.   case 'history':
3.     this.history = new HTML5History(this, options.base)
4.     break
5.   case 'hash':
6.     this.history = new HashHistory(this, options.base, this.fallback)
7.     break
8.   case 'abstract':
9.     this.history = new AbstractHistory(this, options.base)
10.     break
11.   default:
12.     if (process.env.NODE_ENV !== 'production') {
13.       assert(false, `invalid mode: ${mode}`)
14.     }
15. }

复制代码