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
   
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值