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
    }
  }
</script>

<style>

</style>

效果如下
这里写图片描述

不输入或者非10087 10086就都是10088,传对象的某个属性,传boolean都行,反正就是判断


key

vue对普通的元素变化只刷需要刷新的元素,所以性能相对较好,但是如果你就是要某个元素不复用也行,加个 key

像这样

<div v-if="login === '10086'">
  <label>10086</label>
  <input placeholder="Enter 10086" key="10086-key">
</div>
<div v-else>
  <label>10088</label>
  <input placeholder="Enter10088" key="10088-key">
</div>

在这种情况下用户的输入每次都会被重置,默认情况没有刷新的ui是会被复用的,诸如用户输入内容是会被保留的


v-show

v-show和v-if用起来没什么差异,但是后者永远都会被渲染然后在DOM,只是有时候你看不到而已(类似于 Android View.GONE和View.INVISIBLE)

那么使用场景有何差异?(官方扣来的,讲的很直白,看了就懂)
这里写图片描述

v-show 不支持 语法,也不支持 v-else。


v-for

正如上次说的 在v-for指令操作里 a in b是必要格式

b是数据源的key b是item内容的引用

那有小伙会问了,我能得到确切item的“position“么?

答案是:可以,官方给了个类似索引的东西,像这样

<template>
 <div>
  <ul id="app2">
    <li v-for="(a, index) in b">
      {{ parentMessage }} - {{ index }} - {{ a.message }}
    </li>
  </ul>
 </div>
</template>

<script>
  export default {
    name: 'app2',
    data() {
      return {
       a: [
          { message: 'haha' },
          { message: 'hehe' }
        ],
        parentMessage: 'Parent'
      }
    },
    components: {
      mycomponent
    }
  }
</script>

上面提到了in 还可以用of 也就是 a of b,也能达到类似效果


v-for遍历对象

v-for不仅可以遍历数组,也可以遍历对象,像这样

<template>
  <div id="app2">
    <ul id="for-list" class="wjjtest">
      <li v-for="obj in people">
        {{ obj }}
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'app2',
    data() {
      return {
        people:{
          name:'wjj',
          age:26,
          address:'shanghai'
        }
      }
    }
  }
</script>

<style>

</style>

效果:

这里写图片描述

索引的概念在这里依旧有效,例子就不写了


整数迭代循环

python有自增循环诸如0-5,像这样

for i in range(0,5): 
     print '第'+i;

vue也有类似行为像这样

<div>
  <span v-for="n in 5">{{ n }}</span>
</div>

v-for的key

v-for也有key的概念,需要使用v-bind:key来绑定一个属性。


显示过滤/排序结果

上面的 a in b 多半是传入对象或者数组,还可以穿入一个函数,这样我们的有些筛选逻辑就不用做在对象里(虽然筛选对象和写一个筛选方法差距有时候就是一个赋值行为,但是可以更好的抽象)

<li v-for="n in evenNumbers">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

过滤方法用 computed或者method都行,看你个人喜好了

小例子:

app.vue


<template>
  <div id="app2">
    <input v-model="tempstring" v-on:keyup.enter="addNewTodo" placeholder="add item">
    <ul>
      <p is="mycomponent" v-for="(todo, index) in todos" v-bind:title="todo+' index:'+index" v-on:remove="todos.splice(index, 1)"></p>
    </ul>
  </div>
</template>

<script>
  import mycomponent from './component/mycomponent.vue'
  export default {
    name: 'app2',
    data() {
      return {
        tempstring: '',
        todos: [
          'father ',
          'father ',
          'father '
        ]
      }
    },
    components: {
      mycomponent
    },
    methods: {
      addNewTodo: function() {
        this.todos.push(this.tempstring)
        this.newTodoText = ''
      }
    }
  }
</script>

<style>

</style>

mycomponent.vue

<template>
  <div id="mycomponent">
   {{sonstring}} : {{ title }}
    <button v-on:click="$emit('remove')">delete</button>
  </div>
</template>

<script type="text/javascript">
  export default {
    name: 'app2',
    data() {
      return {
        sonstring:"mycomponent part"
      }
    },
    props: ['title']
  }
</script>

<style>

</style>

1.props控件间传递参数
2.$emit响应事件给父控件
相关具体知识点会在之后的文章详细讲述

这一篇把官方文档里我觉得比较care的知识点再回温了下,官方提供的这些功能已经足够应对我们的日常使用了,更多功能和知识点可以看
https://cn.vuejs.org/v2/api/#v-for

谢谢观众老爷们能看到这里!

这里写图片描述

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页