vue.js v-if和v-for那些事(小例子提一提props)

转载请注明出处：王亟亟的大牛之路

按照国际惯例先安利：https://github.com/ddwhan0123/Useful-Open-Source-Android

上礼拜有简单提到v-if 和 v-for 没有深入研究，这一篇就更详细讲讲这俩指令（万物讲到底不就是“赋值“ “判断“等等基础行为组成的么）

---

v-if

之前就是写了简单的if行为那么有v-if就肯定有else。然后在2.1.0版本加入了v-else-if（暂时还没找到类似于 java switch的东西，可能我学习的还不够深入）

用法都差不多

  <p v-if="message==='10086'">message===10086</p>
  <p v-else-if="message==='10087'">message===10087</p>
  <p v-else>message===10088</p>

那我们把上次的例子改改看看效果

<template>
  <div id="app2">
    <p>{
   { message }}</p>
    <input v-model="message"></input>
    <mycomponent></mycomponent>
    <p v-if="message==='10086'">message===10086</p>
    <p v-else-if="message==='10087'">message===10087</p>
    <p v-else>message===10088</p>
  </div>
</template>

<script>
  import mycomponent from './component/mycomponent.vue'
  export default {
    name: 'app2',
    data() {
      return {
        message: 'Hello Vue.js!'
      }
    },
    components: {
      mycomponent