From 89bd64b43bec218acea302e6d4d1284635a485a5 Mon Sep 17 00:00:00 2001
From: defcc <chengchao1@gmail.com>
Date: Thu, 17 Nov 2016 21:00:02 +0800
Subject: [PATCH 01/11] add if conditions

---
 flow/compiler.js                             |  3 +-
 src/compiler/codegen/index.js                | 23 ++++++---
 src/compiler/optimizer.js                    |  4 +-
 src/compiler/parser/index.js                 | 53 ++++++++++++++------
 test/unit/modules/compiler/optimizer.spec.js |  2 +-
 test/unit/modules/compiler/parser.spec.js    | 11 ++--
 6 files changed, 67 insertions(+), 29 deletions(-)

diff --git a/flow/compiler.js b/flow/compiler.js
index c6e46868bf0..752e63bcdf2 100644
--- a/flow/compiler.js
+++ b/flow/compiler.js
@@ -94,8 +94,9 @@ declare type ASTElement = {
 
   if?: string;
   ifProcessed?: boolean;
+  elseif?: string;
   else?: true;
-  elseBlock?: ASTElement;
+  conditions?: Array<{ exp: ?string; block: ASTElement }>;
 
   for?: string;
   forProcessed?: boolean;
diff --git a/src/compiler/codegen/index.js b/src/compiler/codegen/index.js
index 937e037cb50..4452b682dc7 100644
--- a/src/compiler/codegen/index.js
+++ b/src/compiler/codegen/index.js
@@ -109,17 +109,28 @@ function genOnce (el: ASTElement): string {
   }
 }
 
-// v-if with v-once shuold generate code like (a)?_m(0):_m(1)
 function genIf (el: any): string {
   const exp = el.if
   el.ifProcessed = true // avoid recursion
-  return `(${exp})?${el.once ? genOnce(el) : genElement(el)}:${genElse(el)}`
+  return genIfConditions(el.conditions)
 }
 
-function genElse (el: ASTElement): string {
-  return el.elseBlock
-    ? genElement(el.elseBlock)
-    : '_e()'
+function genIfConditions (conditions: any): string {
+  if (!conditions.length) {
+    return '_e()'
+  }
+
+  var condition = conditions.shift()
+  if (condition.exp) {
+    return `(${condition.exp})?${genTernaryExp(condition.block)}:${genIfConditions(conditions)}`
+  } else {
+    return `${genTernaryExp(condition.block)}`
+  }
+
+  // v-if with v-once shuold generate code like (a)?_m(0):_m(1)
+  function genTernaryExp (el) {
+    return el.once ? genOnce(el) : genElement(el)
+  }
 }
 
 function genFor (el: any): string {
diff --git a/src/compiler/optimizer.js b/src/compiler/optimizer.js
index 4bbd2ccf644..60571ad4c41 100644
--- a/src/compiler/optimizer.js
+++ b/src/compiler/optimizer.js
@@ -72,8 +72,8 @@ function markStaticRoots (node: ASTNode, isInFor: boolean) {
         const child = node.children[i]
         isInFor = isInFor || !!node.for
         markStaticRoots(child, isInFor)
-        if (child.type === 1 && child.elseBlock) {
-          markStaticRoots(child.elseBlock, isInFor)
+        if (child.type === 1 && child.conditions) {
+          child.conditions.forEach( _ => { markStaticRoots(_.block, isInFor) })
         }
       }
     }
diff --git a/src/compiler/parser/index.js b/src/compiler/parser/index.js
index 761c3fe3b37..8fb2565392b 100644
--- a/src/compiler/parser/index.js
+++ b/src/compiler/parser/index.js
@@ -154,9 +154,12 @@ export function parse (
         checkRootConstraints(root)
       } else if (!stack.length) {
         // allow 2 root elements with v-if and v-else
-        if (root.if && element.else) {
+        if (root.if && (element.alternate)) {
           checkRootConstraints(element)
-          root.elseBlock = element
+          addIfCondition(root, {
+            exp: element.alternate,
+            block: element
+          })
         } else if (process.env.NODE_ENV !== 'production' && !warned) {
           warned = true
           warn(
@@ -165,8 +168,8 @@ export function parse (
         }
       }
       if (currentParent && !element.forbidden) {
-        if (element.else) {
-          processElse(element, currentParent)
+        if (element.alternate) {
+          processIfAternate(element, currentParent)
         } else {
           currentParent.children.push(element)
           element.parent = currentParent
@@ -313,23 +316,45 @@ function processIf (el) {
   const exp = getAndRemoveAttr(el, 'v-if')
   if (exp) {
     el.if = exp
-  }
-  if (getAndRemoveAttr(el, 'v-else') != null) {
-    el.else = true
+    addIfCondition(el, {
+      exp: exp,
+      block: el
+    })
+  } else {
+    if (getAndRemoveAttr(el, 'v-else') != null) {
+      el.else = true
+    }
+
+    const elseif = getAndRemoveAttr(el, 'v-elseif')
+    if (elseif) {
+      el.aternate = elseif
+    }
+
   }
 }
 
-function processElse (el, parent) {
-  const prev = findPrevElement(parent.children)
-  if (prev && prev.if) {
-    prev.elseBlock = el
+function processIfAternate (el, parent) {
+  const prev = findPrevIfElement(parent.children)
+  if (prev) {
+    addIfCondition(prev, {
+      exp: el.aternate,
+      block: el
+    })
   } else if (process.env.NODE_ENV !== 'production') {
     warn(
-      `v-else used on element <${el.tag}> without corresponding v-if.`
+      `v-${el.elseif ? ('elseif="' + el.elseif + '"') : 'else'} ` +
+      `used on element <${el.tag}> without corresponding v-if.`
     )
   }
 }
 
+function addIfCondition (el, condition) {
+  if (!el.conditions) {
+    el.conditions = []
+  }
+  el.conditions.push(condition)
+}
+
 function processOnce (el) {
   const once = getAndRemoveAttr(el, 'v-once')
   if (once != null) {
@@ -448,10 +473,10 @@ function makeAttrsMap (attrs: Array<Object>, isIE: ?boolean): Object {
   return map
 }
 
-function findPrevElement (children: Array<any>): ASTElement | void {
+function findPrevIfElement (children: Array<any>): ASTElement | void {
   let i = children.length
   while (i--) {
-    if (children[i].tag) return children[i]
+    if (children[i].tag && children[i].if) return children[i]
   }
 }
 
diff --git a/test/unit/modules/compiler/optimizer.spec.js b/test/unit/modules/compiler/optimizer.spec.js
index 3f5a92c8293..80cf4a28614 100644
--- a/test/unit/modules/compiler/optimizer.spec.js
+++ b/test/unit/modules/compiler/optimizer.spec.js
@@ -59,7 +59,7 @@ describe('optimizer', () => {
     optimize(ast, baseOptions)
     expect(ast.static).toBe(false)
     expect(ast.children[0].static).toBe(false)
-    expect(ast.children[0].elseBlock.static).toBeUndefined()
+    expect(ast.children[0].conditions.static).toBeUndefined()
   })
 
   it('v-pre directive', () => {
diff --git a/test/unit/modules/compiler/parser.spec.js b/test/unit/modules/compiler/parser.spec.js
index 21a7f26ad46..57d3db9d65b 100644
--- a/test/unit/modules/compiler/parser.spec.js
+++ b/test/unit/modules/compiler/parser.spec.js
@@ -103,7 +103,7 @@ describe('parser', () => {
       <p v-else></p>
     `, baseOptions)
     expect(ast.tag).toBe('div')
-    expect(ast.elseBlock.tag).toBe('p')
+    expect(ast.conditions[1].block.tag).toBe('p')
   })
 
   it('warn 2 root elements with v-if', () => {
@@ -193,15 +193,16 @@ describe('parser', () => {
   it('v-if directive syntax', () => {
     const ast = parse('<p v-if="show">hello world</p>', baseOptions)
     expect(ast.if).toBe('show')
+    expect(ast.conditions[0].exp).toBe('show')
   })
 
   it('v-else directive syntax', () => {
     const ast = parse('<div><p v-if="show">hello</p><p v-else>world</p></div>', baseOptions)
     const ifAst = ast.children[0]
-    const elseAst = ifAst.elseBlock
-    expect(elseAst.else).toBe(true)
-    expect(elseAst.children[0].text).toBe('world')
-    expect(elseAst.parent).toBe(ast)
+    const conditionsAst = ifAst.conditions
+    expect(conditionsAst.length).toBe(2)
+    expect(conditionsAst[1].block.children[0].text).toBe('world')
+    expect(conditionsAst[1].block.parent).toBe(ast)
   })
 
   it('v-else directive invalid syntax', () => {

From 12f15d395092a46515e4c7b1bb106f44bd24fffd Mon Sep 17 00:00:00 2001
From: defcc <chengchao1@gmail.com>
Date: Fri, 18 Nov 2016 23:23:44 +0800
Subject: [PATCH 02/11] update v-if conditional

---
 flow/compiler.js              |  2 +-
 src/compiler/codegen/index.js |  1 -
 src/compiler/optimizer.js     |  2 +-
 src/compiler/parser/index.js  | 19 ++++++++-----------
 4 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/flow/compiler.js b/flow/compiler.js
index 752e63bcdf2..48be8eb15cd 100644
--- a/flow/compiler.js
+++ b/flow/compiler.js
@@ -95,7 +95,7 @@ declare type ASTElement = {
   if?: string;
   ifProcessed?: boolean;
   elseif?: string;
-  else?: true;
+  condition?: true;
   conditions?: Array<{ exp: ?string; block: ASTElement }>;
 
   for?: string;
diff --git a/src/compiler/codegen/index.js b/src/compiler/codegen/index.js
index 4452b682dc7..a6ffb9f7e01 100644
--- a/src/compiler/codegen/index.js
+++ b/src/compiler/codegen/index.js
@@ -110,7 +110,6 @@ function genOnce (el: ASTElement): string {
 }
 
 function genIf (el: any): string {
-  const exp = el.if
   el.ifProcessed = true // avoid recursion
   return genIfConditions(el.conditions)
 }
diff --git a/src/compiler/optimizer.js b/src/compiler/optimizer.js
index 60571ad4c41..95820fcef3f 100644
--- a/src/compiler/optimizer.js
+++ b/src/compiler/optimizer.js
@@ -73,7 +73,7 @@ function markStaticRoots (node: ASTNode, isInFor: boolean) {
         isInFor = isInFor || !!node.for
         markStaticRoots(child, isInFor)
         if (child.type === 1 && child.conditions) {
-          child.conditions.forEach( _ => { markStaticRoots(_.block, isInFor) })
+          child.conditions.forEach(_ => { markStaticRoots(_.block, isInFor) })
         }
       }
     }
diff --git a/src/compiler/parser/index.js b/src/compiler/parser/index.js
index 93ca5a0c6dd..f86e87bc44b 100644
--- a/src/compiler/parser/index.js
+++ b/src/compiler/parser/index.js
@@ -154,10 +154,10 @@ export function parse (
         checkRootConstraints(root)
       } else if (!stack.length) {
         // allow 2 root elements with v-if and v-else
-        if (root.if && (element.alternate)) {
+        if (root.if && element.condition) {
           checkRootConstraints(element)
           addIfCondition(root, {
-            exp: element.alternate,
+            exp: element.elseif,
             block: element
           })
         } else if (process.env.NODE_ENV !== 'production' && !warned) {
@@ -168,7 +168,7 @@ export function parse (
         }
       }
       if (currentParent && !element.forbidden) {
-        if (element.alternate) {
+        if (element.condition) {
           processIfAternate(element, currentParent)
         } else {
           currentParent.children.push(element)
@@ -321,15 +321,12 @@ function processIf (el) {
       block: el
     })
   } else {
-    if (getAndRemoveAttr(el, 'v-else') != null) {
-      el.else = true
-    }
-
+    const hasElse = getAndRemoveAttr(el, 'v-else') != null
     const elseif = getAndRemoveAttr(el, 'v-elseif')
-    if (elseif) {
-      el.aternate = elseif
+    if (hasElse || elseif) {
+      el.condition = true
     }
-
+    elseif && (el.elseif = elseif)
   }
 }
 
@@ -337,7 +334,7 @@ function processIfAternate (el, parent) {
   const prev = findPrevIfElement(parent.children)
   if (prev) {
     addIfCondition(prev, {
-      exp: el.aternate,
+      exp: el.elseif,
       block: el
     })
   } else if (process.env.NODE_ENV !== 'production') {

From 687fd2beb2ace5c06699908fc01f218dd9c69c0d Mon Sep 17 00:00:00 2001
From: defcc <chengchao1@gmail.com>
Date: Sun, 20 Nov 2016 17:42:04 +0800
Subject: [PATCH 03/11] update test

---
 test/unit/features/directives/if.spec.js   | 49 ++++++++++++
 test/unit/modules/compiler/codegen.spec.js | 21 +++++
 test/unit/modules/compiler/parser.spec.js  | 92 +++++++++++++++++++++-
 3 files changed, 161 insertions(+), 1 deletion(-)

diff --git a/test/unit/features/directives/if.spec.js b/test/unit/features/directives/if.spec.js
index 893c83d35a3..7146ec0e048 100644
--- a/test/unit/features/directives/if.spec.js
+++ b/test/unit/features/directives/if.spec.js
@@ -88,6 +88,55 @@ describe('Directive v-if', () => {
     }).then(done)
   })
 
+  it('should work well with v-elseif', done => {
+    const vm = new Vue({
+      template: `
+        <div>
+          <span v-if="foo">hello</span>
+          <span v-elseif="bar">elseif</span>
+          <span v-else>bye</span>
+        </div>
+      `,
+      data: { foo: true, bar: false }
+    }).$mount()
+    expect(vm.$el.innerHTML.trim()).toBe('<span>hello</span>')
+    vm.foo = false
+    waitForUpdate(() => {
+      expect(vm.$el.innerHTML.trim()).toBe('<span>bye</span>')
+      vm.bar = true
+    }).then(() => {
+      expect(vm.$el.innerHTML.trim()).toBe('<span>elseif</span>')
+      vm.bar = false
+    }).then(() => {
+      expect(vm.$el.innerHTML.trim()).toBe('<span>bye</span>')
+      vm.foo = true
+    }).then(() => {
+      expect(vm.$el.innerHTML.trim()).toBe('<span>hello</span>')
+      vm.foo = false
+      vm.bar = {}
+    }).then(() => {
+      expect(vm.$el.innerHTML.trim()).toBe('<span>elseif</span>')
+      vm.bar = 0
+    }).then(() => {
+      expect(vm.$el.innerHTML.trim()).toBe('<span>bye</span>')
+      vm.bar = []
+    }).then(() => {
+      expect(vm.$el.innerHTML.trim()).toBe('<span>elseif</span>')
+      vm.bar = null
+    }).then(() => {
+      expect(vm.$el.innerHTML.trim()).toBe('<span>bye</span>')
+      vm.bar = '0'
+    }).then(() => {
+      expect(vm.$el.innerHTML.trim()).toBe('<span>elseif</span>')
+      vm.bar = undefined
+    }).then(() => {
+      expect(vm.$el.innerHTML.trim()).toBe('<span>bye</span>')
+      vm.bar = 1
+    }).then(() => {
+      expect(vm.$el.innerHTML.trim()).toBe('<span>elseif</span>')
+    }).then(done)
+  })
+
   it('should work well with v-for', done => {
     const vm = new Vue({
       template: `
diff --git a/test/unit/modules/compiler/codegen.spec.js b/test/unit/modules/compiler/codegen.spec.js
index 9da00d94129..7bfef3cf399 100644
--- a/test/unit/modules/compiler/codegen.spec.js
+++ b/test/unit/modules/compiler/codegen.spec.js
@@ -67,6 +67,27 @@ describe('codegen', () => {
     )
   })
 
+  it('generate v-elseif directive', () => {
+    assertCodegen(
+      '<div><p v-if="show">hello</p><p v-elseif="hide">world</p></div>',
+      `with(this){return _h('div',[(show)?_h('p',["hello"]):(hide)?_h('p',["world"]):_e()])}`
+    )
+  })
+
+  it('generate v-elseif with v-else directive', () => {
+    assertCodegen(
+      '<div><p v-if="show">hello</p><p v-elseif="hide">world</p><p v-else>bye</p></div>',
+      `with(this){return _h('div',[(show)?_h('p',["hello"]):(hide)?_h('p',["world"]):_h('p',["bye"])])}`
+    )
+  })
+
+  it('generate v-elseif with v-else directive', () => {
+    assertCodegen(
+        '<div><p v-if="show">hello</p><p v-elseif="hide">world</p><p v-else>bye</p></div>',
+        `with(this){return _h('div',[(show)?_h('p',["hello"]):(hide)?_h('p',["world"]):_h('p',["bye"])])}`
+    )
+  })
+
   it('generate ref', () => {
     assertCodegen(
       '<p ref="component1"></p>',
diff --git a/test/unit/modules/compiler/parser.spec.js b/test/unit/modules/compiler/parser.spec.js
index 57d3db9d65b..3d13527865f 100644
--- a/test/unit/modules/compiler/parser.spec.js
+++ b/test/unit/modules/compiler/parser.spec.js
@@ -88,6 +88,12 @@ describe('parser', () => {
       .not.toHaveBeenWarned()
   })
 
+  it('not warn 3 root elements with v-if, v-elseif and v-else', () => {
+    parse('<div v-if="1"></div><div v-elseif="2"></div><div v-else></div>', baseOptions)
+    expect('Component template should contain exactly one root element')
+        .not.toHaveBeenWarned()
+  })
+
   it('not warn 2 root elements with v-if and v-else on separate lines', () => {
     parse(`
       <div v-if="1"></div>
@@ -97,6 +103,26 @@ describe('parser', () => {
       .not.toHaveBeenWarned()
   })
 
+  it('not warn 3 or more root elements with v-if, v-elseif and v-else on separate lines', () => {
+    parse(`
+      <div v-if="1"></div>
+      <div v-elseif="2"></div>
+      <div v-else></div>
+    `, baseOptions)
+    expect('Component template should contain exactly one root element')
+        .not.toHaveBeenWarned()
+
+    parse(`
+      <div v-if="1"></div>
+      <div v-elseif="2"></div>
+      <div v-elseif="3"></div>
+      <div v-elseif="4"></div>
+      <div v-else></div>
+    `, baseOptions)
+    expect('Component template should contain exactly one root element')
+        .not.toHaveBeenWarned()
+  })
+
   it('generate correct ast for 2 root elements with v-if and v-else on separate lines', () => {
     const ast = parse(`
       <div v-if="1"></div>
@@ -106,6 +132,32 @@ describe('parser', () => {
     expect(ast.conditions[1].block.tag).toBe('p')
   })
 
+  it('generate correct ast for 3 or more root elements with v-if and v-else on separate lines', () => {
+    const ast = parse(`
+      <div v-if="1"></div>
+      <span v-elseif="2"></span>
+      <p v-else></p>
+    `, baseOptions)
+    expect(ast.tag).toBe('div')
+    expect(ast.conditions[0].block.tag).toBe('div')
+    expect(ast.conditions[1].block.tag).toBe('span')
+    expect(ast.conditions[2].block.tag).toBe('p')
+
+    const astMore = parse(`
+      <div v-if="1"></div>
+      <span v-elseif="2"></span>
+      <div v-elseif="3"></div>
+      <span v-elseif="4"></span>
+      <p v-else></p>
+    `, baseOptions)
+    expect(astMore.tag).toBe('div')
+    expect(astMore.conditions[0].block.tag).toBe('div')
+    expect(astMore.conditions[1].block.tag).toBe('span')
+    expect(astMore.conditions[2].block.tag).toBe('div')
+    expect(astMore.conditions[3].block.tag).toBe('span')
+    expect(astMore.conditions[4].block.tag).toBe('p')
+  })
+
   it('warn 2 root elements with v-if', () => {
     parse('<div v-if="1"></div><div v-if="2"></div>', baseOptions)
     expect('Component template should contain exactly one root element:\n\n<div v-if="1"></div><div v-if="2"></div>')
@@ -118,12 +170,34 @@ describe('parser', () => {
       .toHaveBeenWarned()
   })
 
+  it('warn 3 root elements with v-if and v-elseif on first 2', () => {
+    parse('<div v-if="1"></div><div v-elseif></div><div></div>', baseOptions)
+    expect('Component template should contain exactly one root element:\n\n' +
+        '<div v-if="1"></div><div v-elseif></div><div></div>')
+        .toHaveBeenWarned()
+  })
+
+  it('warn 4 root elements with v-if, v-elseif and v-else on first 2', () => {
+    parse('<div v-if="1"></div><div v-elseif></div><div v-else></div><div></div>', baseOptions)
+    expect('Component template should contain exactly one root element:\n\n' +
+        '<div v-if="1"></div><div v-elseif></div><div v-else></div><div></div>')
+        .toHaveBeenWarned()
+  })
+
   it('warn 2 root elements with v-if and v-else with v-for on 2nd', () => {
     parse('<div v-if="1"></div><div v-else v-for="i in [1]"></div>', baseOptions)
-    expect('Cannot use v-for on stateful component root element because it renders multiple elements:\n<div v-if="1"></div><div v-else v-for="i in [1]"></div>')
+    expect('Cannot use v-for on stateful component root element because it renders multiple elements:\n' +
+        '<div v-if="1"></div><div v-else v-for="i in [1]"></div>')
       .toHaveBeenWarned()
   })
 
+  it('warn 2 root elements with v-if and v-elseif with v-for on 2nd', () => {
+    parse('<div v-if="1"></div><div v-elseif="2" v-for="i in [1]"></div>', baseOptions)
+    expect('Cannot use v-for on stateful component root element because it renders multiple elements:\n' +
+        '<div v-if="1"></div><div v-elseif="2" v-for="i in [1]"></div>')
+        .toHaveBeenWarned()
+  })
+
   it('warn <template> as root element', () => {
     parse('<template></template>', baseOptions)
     expect('Cannot use <template> as component root element').toHaveBeenWarned()
@@ -196,6 +270,17 @@ describe('parser', () => {
     expect(ast.conditions[0].exp).toBe('show')
   })
 
+  it('v-elseif directive syntax', () => {
+    const ast = parse('<div><p v-if="show">hello</p><span v-elseif="2">elseif</span><p v-else>world</p></div>', baseOptions)
+    const ifAst = ast.children[0]
+    const conditionsAst = ifAst.conditions
+    expect(conditionsAst.length).toBe(3)
+    expect(conditionsAst[1].block.children[0].text).toBe('elseif')
+    expect(conditionsAst[1].block.parent).toBe(ast)
+    expect(conditionsAst[2].block.children[0].text).toBe('world')
+    expect(conditionsAst[2].block.parent).toBe(ast)
+  })
+
   it('v-else directive syntax', () => {
     const ast = parse('<div><p v-if="show">hello</p><p v-else>world</p></div>', baseOptions)
     const ifAst = ast.children[0]
@@ -205,6 +290,11 @@ describe('parser', () => {
     expect(conditionsAst[1].block.parent).toBe(ast)
   })
 
+  it('v-elseif directive invalid syntax', () => {
+    parse('<div><p v-elseif>world</p></div>', baseOptions)
+    expect('v-elseif used on element').toHaveBeenWarned()
+  })
+
   it('v-else directive invalid syntax', () => {
     parse('<div><p v-else>world</p></div>', baseOptions)
     expect('v-else used on element').toHaveBeenWarned()

From 2148b5eabb12c4f558352f0a20d0ed37434a6264 Mon Sep 17 00:00:00 2001
From: defcc <chengchao1@gmail.com>
Date: Sun, 20 Nov 2016 18:14:19 +0800
Subject: [PATCH 04/11] update test case

---
 test/unit/modules/compiler/parser.spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/unit/modules/compiler/parser.spec.js b/test/unit/modules/compiler/parser.spec.js
index 3d13527865f..127e8528ea8 100644
--- a/test/unit/modules/compiler/parser.spec.js
+++ b/test/unit/modules/compiler/parser.spec.js
@@ -291,8 +291,8 @@ describe('parser', () => {
   })
 
   it('v-elseif directive invalid syntax', () => {
-    parse('<div><p v-elseif>world</p></div>', baseOptions)
-    expect('v-elseif used on element').toHaveBeenWarned()
+    parse('<div><p v-elseif="1">world</p></div>', baseOptions)
+    expect('v-elseif="1" used on element').toHaveBeenWarned()
   })
 
   it('v-else directive invalid syntax', () => {

From f83424cbfe46683569a03edf5fd89a738742ad38 Mon Sep 17 00:00:00 2001
From: defcc <chengchao1@gmail.com>
Date: Sun, 20 Nov 2016 18:17:18 +0800
Subject: [PATCH 05/11] add test case

---
 test/unit/modules/compiler/codegen.spec.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/test/unit/modules/compiler/codegen.spec.js b/test/unit/modules/compiler/codegen.spec.js
index 7bfef3cf399..16c520cc187 100644
--- a/test/unit/modules/compiler/codegen.spec.js
+++ b/test/unit/modules/compiler/codegen.spec.js
@@ -81,10 +81,10 @@ describe('codegen', () => {
     )
   })
 
-  it('generate v-elseif with v-else directive', () => {
+  it('generate mutli v-elseif with v-else directive', () => {
     assertCodegen(
-        '<div><p v-if="show">hello</p><p v-elseif="hide">world</p><p v-else>bye</p></div>',
-        `with(this){return _h('div',[(show)?_h('p',["hello"]):(hide)?_h('p',["world"]):_h('p',["bye"])])}`
+        '<div><p v-if="show">hello</p><p v-elseif="hide">world</p><p v-elseif="3">elseif</p><p v-else>bye</p></div>',
+        `with(this){return _h('div',[(show)?_h('p',["hello"]):(hide)?_h('p',["world"]):(3)?_h('p',["elseif"]):_h('p',["bye"])])}`
     )
   })
 

From 3e5cf2aa48368c051b02ed33eae240da51496466 Mon Sep 17 00:00:00 2001
From: defcc <chengchao1@gmail.com>
Date: Sun, 20 Nov 2016 18:47:52 +0800
Subject: [PATCH 06/11] update if conditions

---
 src/compiler/optimizer.js                    | 12 +++++++++++-
 test/unit/modules/compiler/optimizer.spec.js |  2 +-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/compiler/optimizer.js b/src/compiler/optimizer.js
index b1f29a79fb9..14270aa3d31 100644
--- a/src/compiler/optimizer.js
+++ b/src/compiler/optimizer.js
@@ -81,10 +81,20 @@ function markStaticRoots (node: ASTNode, isInFor: boolean) {
         isInFor = isInFor || !!node.for
         markStaticRoots(child, isInFor)
         if (child.type === 1 && child.conditions) {
-          child.conditions.forEach(_ => { markStaticRoots(_.block, isInFor) })
+          walkThroughConditionsBlocks(child.conditions, isInFor)
         }
       }
     }
+    if (node.conditions) {
+      walkThroughConditionsBlocks(node.conditions, isInFor || !!node.for)
+    }
+  }
+}
+
+function walkThroughConditionsBlocks (conditionBlocks: array, isInFor: boolean): void {
+  for (let i = 1, conditionBlock; conditionBlock = conditionBlocks[i++];) {
+    const node = conditionBlock.block
+    markStaticRoots(node, isInFor)
   }
 }
 
diff --git a/test/unit/modules/compiler/optimizer.spec.js b/test/unit/modules/compiler/optimizer.spec.js
index c24013db5e4..d1af0c1d6e1 100644
--- a/test/unit/modules/compiler/optimizer.spec.js
+++ b/test/unit/modules/compiler/optimizer.spec.js
@@ -66,7 +66,7 @@ describe('optimizer', () => {
     optimize(ast, baseOptions)
     expect(ast.static).toBe(false)
     expect(ast.children[0].static).toBe(false)
-    expect(ast.children[0].conditions.static).toBeUndefined()
+    expect(ast.children[0].conditions[1].static).toBeUndefined()
   })
 
   it('v-pre directive', () => {

From 47eb2b96940297f3658144da425a6ddc0faade4c Mon Sep 17 00:00:00 2001
From: defcc <chengchao1@gmail.com>
Date: Sun, 20 Nov 2016 23:28:34 +0800
Subject: [PATCH 07/11] update walkThroughConditionsBlocks

---
 src/compiler/optimizer.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/compiler/optimizer.js b/src/compiler/optimizer.js
index 18bfabf0eff..2b18439fa4f 100644
--- a/src/compiler/optimizer.js
+++ b/src/compiler/optimizer.js
@@ -88,8 +88,7 @@ function markStaticRoots (node: ASTNode, isInFor: boolean) {
 
 function walkThroughConditionsBlocks (conditionBlocks: array, isInFor: boolean): void {
   for (let i = 1, conditionBlock; conditionBlock = conditionBlocks[i++];) {
-    const node = conditionBlock.block
-    markStaticRoots(node, isInFor)
+    markStaticRoots(conditionBlock.block, isInFor)
   }
 }
 

From 0644a7a284fb79a1e93f656cdb40e040226cf0b5 Mon Sep 17 00:00:00 2001
From: defcc <chengchao1@gmail.com>
Date: Mon, 21 Nov 2016 22:39:02 +0800
Subject: [PATCH 08/11] update v-elseif

---
 flow/compiler.js                             |  2 +-
 src/compiler/parser/index.js                 | 27 ++++++++++----------
 test/unit/modules/compiler/optimizer.spec.js | 22 +++++++++++++---
 3 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/flow/compiler.js b/flow/compiler.js
index aa081d50620..ee988426e79 100644
--- a/flow/compiler.js
+++ b/flow/compiler.js
@@ -95,7 +95,7 @@ declare type ASTElement = {
   if?: string;
   ifProcessed?: boolean;
   elseif?: string;
-  condition?: true;
+  else?: true;
   conditions?: Array<{ exp: ?string; block: ASTElement }>;
 
   for?: string;
diff --git a/src/compiler/parser/index.js b/src/compiler/parser/index.js
index a4049819e43..724432a20e4 100644
--- a/src/compiler/parser/index.js
+++ b/src/compiler/parser/index.js
@@ -153,8 +153,8 @@ export function parse (
         root = element
         checkRootConstraints(root)
       } else if (!stack.length) {
-        // allow 2 root elements with v-if and v-else
-        if (root.if && element.condition) {
+        // allow root elements with v-if, v-elseif and v-else
+        if (root.if && (element.elseif || element.else)) {
           checkRootConstraints(element)
           addIfCondition(root, {
             exp: element.elseif,
@@ -168,8 +168,8 @@ export function parse (
         }
       }
       if (currentParent && !element.forbidden) {
-        if (element.condition) {
-          processIfAternate(element, currentParent)
+        if (element.elseif || element.else) {
+          processIfConditions(element, currentParent)
         } else {
           currentParent.children.push(element)
           element.parent = currentParent
@@ -321,18 +321,19 @@ function processIf (el) {
       block: el
     })
   } else {
-    const hasElse = getAndRemoveAttr(el, 'v-else') != null
+    if (getAndRemoveAttr(el, 'v-else') != null) {
+      el.else = true
+    }
     const elseif = getAndRemoveAttr(el, 'v-elseif')
-    if (hasElse || elseif) {
-      el.condition = true
+    if (elseif) {
+      el.elseif = elseif
     }
-    elseif && (el.elseif = elseif)
   }
 }
 
-function processIfAternate (el, parent) {
-  const prev = findPrevIfElement(parent.children)
-  if (prev) {
+function processIfConditions (el, parent) {
+  const prev = findPrevElement(parent.children)
+  if (prev && prev.if) {
     addIfCondition(prev, {
       exp: el.elseif,
       block: el
@@ -470,10 +471,10 @@ function makeAttrsMap (attrs: Array<Object>, isIE: ?boolean): Object {
   return map
 }
 
-function findPrevIfElement (children: Array<any>): ASTElement | void {
+function findPrevElement (children: Array<any>): ASTElement | void {
   let i = children.length
   while (i--) {
-    if (children[i].tag && children[i].if) return children[i]
+    if (children[i].tag) return children[i]
   }
 }
 
diff --git a/test/unit/modules/compiler/optimizer.spec.js b/test/unit/modules/compiler/optimizer.spec.js
index 12d16e0bf28..5fc38251430 100644
--- a/test/unit/modules/compiler/optimizer.spec.js
+++ b/test/unit/modules/compiler/optimizer.spec.js
@@ -66,7 +66,7 @@ describe('optimizer', () => {
     optimize(ast, baseOptions)
     expect(ast.static).toBe(false)
     expect(ast.children[0].static).toBe(false)
-    expect(ast.children[0].conditions[1].static).toBeUndefined()
+    expect(ast.children[0].conditions[1].block.static).toBeUndefined()
   })
 
   it('v-pre directive', () => {
@@ -213,14 +213,28 @@ describe('optimizer', () => {
   it('mark static trees inside v-for with nested v-else and v-once', () => {
     const ast = parse(`
       <div v-if="1"></div>
+      <div v-elseif="2">
+        <div v-for="i in 10" :key="i">
+          <div v-if="1">{{ i }}</div>
+          <div v-elseif="2" v-once>{{ i }}</div>
+          <div v-else v-once>{{ i }}</div>
+        </div>
+      </div>
       <div v-else>
         <div v-for="i in 10" :key="i">
           <div v-if="1">{{ i }}</div>
           <div v-else v-once>{{ i }}</div>
         </div>
-      <div>`, baseOptions)
+      </div>
+      `, baseOptions)
     optimize(ast, baseOptions)
-    expect(ast.elseBlock.children[0].children[0].elseBlock.staticRoot).toBe(false)
-    expect(ast.elseBlock.children[0].children[0].elseBlock.staticInFor).toBe(true)
+    expect(ast.conditions[1].block.children[0].children[0].conditions[1].block.staticRoot).toBe(false)
+    expect(ast.conditions[1].block.children[0].children[0].conditions[1].block.staticInFor).toBe(true)
+
+    expect(ast.conditions[1].block.children[0].children[0].conditions[2].block.staticRoot).toBe(false)
+    expect(ast.conditions[1].block.children[0].children[0].conditions[2].block.staticInFor).toBe(true)
+
+    expect(ast.conditions[2].block.children[0].children[0].conditions[1].block.staticRoot).toBe(false)
+    expect(ast.conditions[2].block.children[0].children[0].conditions[1].block.staticInFor).toBe(true)
   })
 })

From b1f01699dc483e5f611b2ea094cbd62bffe8b089 Mon Sep 17 00:00:00 2001
From: defcc <chengchao1@gmail.com>
Date: Mon, 21 Nov 2016 23:04:22 +0800
Subject: [PATCH 09/11] update v-once with v-elseif test case

---
 test/unit/features/directives/once.spec.js | 50 ++++++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/test/unit/features/directives/once.spec.js b/test/unit/features/directives/once.spec.js
index 21da307980b..01bb83ca9a4 100644
--- a/test/unit/features/directives/once.spec.js
+++ b/test/unit/features/directives/once.spec.js
@@ -242,6 +242,56 @@ describe('Directive v-once', () => {
     }).then(done)
   })
 
+  it('should work inside v-for with nested v-elseif and v-else', done => {
+    const vm = new Vue({
+      data: {
+        tester: false,
+        list: [{ id: 0, text: 'a', tester: true, truthy: 'y' }]
+      },
+      template: `
+        <div v-if="0"></div>
+        <div v-elseif="tester">
+          <div v-for="i in list" :key="i.id">
+            <span v-if="i.tester" v-once>{{ i.truthy }}</span>
+            <span v-elseif="tester" v-once>{{ i.text }}elseif</span>
+            <span v-else v-once>{{ i.text }}</span>
+          </div>
+        </div>
+        <div v-else>
+          <div v-for="i in list" :key="i.id">
+            <span v-if="i.tester" v-once>{{ i.truthy }}</span>
+            <span v-elseif="tester">{{ i.text }}elseif</span>
+            <span v-else v-once>{{ i.text }}</span>
+          </div>
+        </div>
+      `
+    }).$mount()
+
+    expectTextContent(vm, 'y')
+    vm.list[0].truthy = 'yy'
+    waitForUpdate(() => {
+      expectTextContent(vm, 'y')
+      vm.list[0].tester = false
+    }).then(() => {
+      expectTextContent(vm, 'a')
+      vm.list[0].text = 'nn'
+    }).then(() => {
+      expectTextContent(vm, 'a')
+      vm.tester = true
+    }).then(() => {
+      expectTextContent(vm, 'nnelseif')
+      vm.list[0].text = 'xx'
+    }).then(() => {
+      expectTextContent(vm, 'nnelseif')
+      vm.list[0].tester = true
+    }).then(() => {
+      expectTextContent(vm, 'yy')
+      vm.list[0].truthy = 'nn'
+    }).then(() => {
+      expectTextContent(vm, 'yy')
+    }).then(done)
+  })
+
   it('should warn inside non-keyed v-for', () => {
     const vm = new Vue({
       data: {

From 0b0fa198ccff54f3411eea1afc4cb37ea83ac574 Mon Sep 17 00:00:00 2001
From: defcc <chengchao1@gmail.com>
Date: Mon, 21 Nov 2016 23:28:16 +0800
Subject: [PATCH 10/11] update style with v-elseif

---
 test/unit/features/directives/style.spec.js | 35 +++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/test/unit/features/directives/style.spec.js b/test/unit/features/directives/style.spec.js
index 8a480602a76..beca442de76 100644
--- a/test/unit/features/directives/style.spec.js
+++ b/test/unit/features/directives/style.spec.js
@@ -304,4 +304,39 @@ describe('Directive v-bind:style', () => {
       expect(style.marginTop).toBe('12px')
     }).then(done)
   })
+
+  it('should not merge for v-if, v-elseif and v-else elements', (done) => {
+    const vm = new Vue({
+      template:
+        '<div>' +
+          '<section style="color: blue" :style="style" v-if="foo"></section>' +
+          '<section style="margin-top: 12px" v-elseif="bar"></section>' +
+          '<section style="margin-bottom: 24px" v-else></section>' +
+          '<div></div>' +
+        '</div>',
+      data: {
+        foo: true,
+        bar: false,
+        style: {
+          fontSize: '12px'
+        }
+      }
+    }).$mount()
+    const style = vm.$el.children[0].style
+    expect(style.fontSize).toBe('12px')
+    expect(style.color).toBe('blue')
+    waitForUpdate(() => {
+      vm.foo = false
+    }).then(() => {
+      expect(style.color).toBe('')
+      expect(style.fontSize).toBe('')
+      expect(style.marginBottom).toBe('24px')
+      vm.bar = true
+    }).then(() => {
+      expect(style.color).toBe('')
+      expect(style.fontSize).toBe('')
+      expect(style.marginBottom).toBe('')
+      expect(style.marginTop).toBe('12px')
+    }).then(done)
+  })
 })

From e2c898df6b606cbf227c65e23d61cfae2b0d8b17 Mon Sep 17 00:00:00 2001
From: defcc <chengchao1@gmail.com>
Date: Tue, 22 Nov 2016 01:43:50 +0800
Subject: [PATCH 11/11] update flow type

---
 flow/compiler.js              | 3 ++-
 src/compiler/codegen/index.js | 2 +-
 src/compiler/optimizer.js     | 6 +++---
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/flow/compiler.js b/flow/compiler.js
index cb90309ac5b..977df14856c 100644
--- a/flow/compiler.js
+++ b/flow/compiler.js
@@ -41,6 +41,7 @@ declare type ModuleOptions = {
 }
 
 declare type ASTModifiers = { [key: string]: boolean }
+declare type ASTIfConditions = Array<{ exp: ?string; block: ASTElement }>
 
 declare type ASTElementHandler = {
   value: string;
@@ -97,7 +98,7 @@ declare type ASTElement = {
   ifProcessed?: boolean;
   elseif?: string;
   else?: true;
-  conditions?: Array<{ exp: ?string; block: ASTElement }>;
+  conditions?: ASTIfConditions;
 
   for?: string;
   forProcessed?: boolean;
diff --git a/src/compiler/codegen/index.js b/src/compiler/codegen/index.js
index ecbe64ae498..572634fa801 100644
--- a/src/compiler/codegen/index.js
+++ b/src/compiler/codegen/index.js
@@ -115,7 +115,7 @@ function genIf (el: any): string {
   return genIfConditions(el.conditions)
 }
 
-function genIfConditions (conditions: any): string {
+function genIfConditions (conditions: ASTIfConditions): string {
   if (!conditions.length) {
     return '_e()'
   }
diff --git a/src/compiler/optimizer.js b/src/compiler/optimizer.js
index 2b18439fa4f..34029ee6ec9 100644
--- a/src/compiler/optimizer.js
+++ b/src/compiler/optimizer.js
@@ -86,9 +86,9 @@ function markStaticRoots (node: ASTNode, isInFor: boolean) {
   }
 }
 
-function walkThroughConditionsBlocks (conditionBlocks: array, isInFor: boolean): void {
-  for (let i = 1, conditionBlock; conditionBlock = conditionBlocks[i++];) {
-    markStaticRoots(conditionBlock.block, isInFor)
+function walkThroughConditionsBlocks (conditionBlocks: ASTIfConditions, isInFor: boolean): void {
+  for (let i = 1, len = conditionBlocks.length; i < len; i++) {
+    markStaticRoots(conditionBlocks[i].block, isInFor)
   }
 }