美文网首页vue
Vue.js学习笔记 二 : 指令: v-if 条件(v-sho

Vue.js学习笔记 二 : 指令: v-if 条件(v-sho

作者: 有情怀的程序猿 | 来源:发表于2017-02-21 16:15 被阅读939次
1: v-if条件
//html
    <div class="item">
      <p>v-if="条件" 指令</p>
      <div id="app3">
        <button v-on:click="change()">if条件</button>
        <span v-if="seen">看到我了, 说明你使用的是v-if条件指令seen为{{seen}}</span>
      </div>
    </div>

//js
// 条件与循环==>条件  v-if=""
  let app3 = new Vue({
    el: '#app3',
    data: {
      seen: true
    },
    methods: {                                          //这里使用了方法,
      change: function (event) {
        this.seen = this.seen? false : true
      }
    }
  })
  • 要求的效果是点击按钮切换是否渲染
  • 这里不是display: none或者block的切换, 这是代码块是否渲染的问题
  • 显示隐藏使用 v-show
1-1: v-if ... v-else 以及 v-esle-if
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

// v-if... v-else    v-esle-if

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>
  • 不同条件渲染不同的元素

  • 且支持 template 语法

      <template v-if="ok">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
  </template>
  • 使用 key 控制元素的可重用
    • **注意: **Vue 尝试尽可能高效的渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 更快之外还可以得到一些好处, 例如:
<template v-if="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username">
</template>
<template v-else>
      <label>Email</label>
      <input placeholder="Enter your email address">
</template>

- 两个模版由于使用了相同的元素 `<label>,<input>`, 则 `<input>` 会被复用，但是在 `input` 输入的内容在从用户名登陆切换成邮箱登陆页面时仍然在输入框中,
- 我们要求切换后 `input` 也是空的, 可以使用 `key` 作为 **唯一值** 标示.
```
  <template v-if="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username" key="username-input">
   </template>
   <template v-else>
      <label>Email</label>
      <input placeholder="Enter your email address" key="email-input">
  </template>
```
  - 这样有了唯一标示 `key`,  就会从新渲染 `input` 
  - `label`没有标示, 所以不会从新渲染
2: v-show 以及与 v-if 的区别
<h1 v-show="ok">Hello!</h1>
  • v-show 条件性显示或隐藏,
  • v-show 的元素会始终渲染并保持在 DOM 中。v-show 是简单的切换元素的 CSS属性 display
  • v-show 不支持 template
2-1: v-show 与 v-if 的区别
  • v-if 是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。
  • v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。
  • v-if 支持 template , v-show 不支持
  • 相比之下， v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。
  • 一般来说， v-if 有更高的切换消耗而 v-show有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if较好。
3: v-for 循环

我认为它类似 for...in... 循环遍历
格式:

  • v-for 指令根据一组数组的选项列表进行渲染。
//todos 数组的选项列表

  let app4 = new Vue({
      el: '#app4',
      data: {
        message: '',
        todos: [
          {text: '被遍历的数据(数组), 写在vue.js格式的data中'},
          {text: '还可以在写一个添加方法'},
          {text: '或者删除'},
          {text: '本页其实都可以全部这样生成'},
        ],
      }
})
  • v-for 指令需要以 item in items 形式的特殊语法， items (就是上面代码的todos)是源数据数组并且 item (下面代码的todo) 是数组元素迭代的别名。
    <div class="item">
      <p>v-for="条件" 指令</p>
      <div id="app4">
        <!-- <button v-on:click="change()">for循环</button> -->
        <ol>
          <li><p>类似for..in函数, todo遍历data下的todos数组,</p></li>
          <li><p>然后把遍历出来的单元赋值todo, 在使用todo.text把的text的值调出来</p></li>

          <li v-for="todo in todos">       // item in items的格式
            {{todo.text}}
          </li>
        </ol>
        <div>
          <input type="text" v-model="message" placeholder="输入下试试"> <button v-on:click="send(message)">添加</button>
          <p>{{message}}</p>
        </div>
     </div>
    </div>

一个简单的 todoList 贴个完整的代码:

//html 

   <div class="item">
      <p>v-for="条件" 指令</p>
      <div id="app4">
        <!-- <button v-on:click="change()">for循环</button> -->
        <ol>
          <li><p>类似for..in函数, todo遍历data下的todos数组,</p></li>
          <li><p>然后把遍历出来的单元赋值todo, 在使用todo.text把的text的值调出来</p></li>
          <li v-for="todo in todos">
            {{todo.text}}
          </li>
        </ol>
        <div>
          <input type="text" v-model="message" placeholder="输入下试试"> 
          <button v-on:click="send(message)">添加</button>
          <p>{{message}}</p>
        </div>
      </div>
    </div>

//js

  let app4 = new Vue({
    el: '#app4',
    data: {
      message: '',
      todos: [
        {text: '被遍历的数据(数组), 写在vue.js格式的data中'},
        {text: '还可以在写一个添加方法'},
        {text: '或者删除'},
        {text: '本页其实都可以全部这样生成'},
      ],
    },
  //添加todo事件
    methods: {
      send:function (mes) {
        let obj = {text: mes}
        this.todos.push(obj);
        this.message = '';
      }

    }
  })
  • 这里有 v-model数据双向绑定, 暂时在这里先不说
3-1: v-for="(item, index) in items", v-for的第二个属性 index
//html

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

//js 
var example2 = new Vue({
    el: '#example-2',
      data : {
      parentMessage: 'Parent',
      items: [
        { message: 'Foo' },
        { message: 'Bar' }
      ]
    }
})

结果

  • Parent - 0 - Foo
  • Parent - 1 - Bar
3-2: v-for= "(value , key, index) in object" 还可以遍历一个对象 及对对象的遍历, 对对方法的遍历, 对对整数的遍历

对一个对象的遍历, 除了可以遍历出来值(value) 还有键(key) 和 索引(index)

//html
//对对象的遍历, 对方法的遍历, 对整数的遍历

<div class="item">
      <p>3-1: v-for="条件"循环中加入方法 指令</p>
      <div id="app5">
        <ol>
          <li v-for="n in filterNumber(numbers)"> {{n}}</li>
        </ol>
        <p>对对象的遍历</p>
        <ul>
          <li v-for="(value, key, index) in obj">
            'key' - {{key}} - 'value' - {{value}} - 'index' -{{index}}
          </li>
        </ul>
        <p>对整数的遍历</p>
        <ul>
          <li v-for="n in 10">{{n}}</li>
        </ul>
      </div>
    </div>

//js 

  let app5 = new Vue({
    el: '#app5',
    data: {
      numbers: [1, 2, 3, 4, 5, 6, 7, 8],
      obj: {
        '这是对': '对象',
        '的': '遍历',
        '你看看': '好使不'
      }
    },
    methods: {
      filterNumber: function () {
        return this.numbers.filter((item) => {
          return item % 2 === 0;
        })
      }
    }
  })
这只是简单的应用, 还有一些数据传递及处理的问题,之后再添加

相关文章