拼搏30天VUE.js之V-for（Part2）

今天來複習一波v-for，這個真的是超級好用的屬性。

v-for指令基于一个数组渲染一个列表。

有以下5種方法：

  1. <div v-for="item in items">{{ item }}</div>
  2. <div v-for="(item, index) in items">{{ index }} {{ item.age}}</div>
  3. <div v-for="val in object"></div>
  4. <div v-for="(val, key) in object"></div>
  5. <div v-for="(val, key, index) in object"></div>

1-1： item in items（items 是数据数组，item 是当前数组元素的别名）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<ul id="app-1">
  <li v-for="item in items">
    {{ item.age }}
  </li>
</ul>
	
<script>
var example1 = new Vue({
  el: '#app-1',
  data: {
    items: [
      { age: '12' },
      { age: '18' }
    ]
  }
})
</script>
</body>
</html>

拼搏30天VUE.js之V-for（Part2）

1-2 數字排序

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<ul id="app-1">

    <li v-for="item in sortItems">{{ item }}</li>

</ul>
	
<script>
var app = new Vue({
    el: '#app-1',
    computed: {
        sortItems: function() {
            return this.items.sort(sortNumber)
        }
    },
    data: {
        items: [1, 34, 89, 92, 45, 76, 3, 12]
    }
})
function sortNumber(a, b) {
    return a - b
}
</script>
</body>
</html>

拼搏30天VUE.js之V-for（Part2）

2：(index, item) in items（index当前数组元素的索引）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<ul id="app-1">
 <div v-for="(item , index) in items">
  {{ index }} {{ item.age }}
</div>
</ul>
	
<script>
var example1 = new Vue({
  el: '#app-1',
  data: {
    items: [
      { age: '11' },
      { age: '18' }
    ]
  }
})
</script>
</body>
</html>

拼搏30天VUE.js之V-for（Part2）

3：value  in object

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<ul id="app-1">
    <li v-for="value  in object">{{ value.name }} is {{ value.age}} years old!</li>
</ul>
	
<script>
var app = new Vue({
    el: '#app-1',
   data: {
    object: [
        {
            name: 'livia',
            age: 34
        },
        {
            name: 'amy',
            age: 18
        }
    ]
}
})
</script>
</body>
</html>

拼搏30天VUE.js之V-for（Part2）

4：(key, val) in object（key是鍵，val是值）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<ul id="app-1" class="demo">
 <li v-for="(key, val) in object">
  {{ key }} {{ val }}
</li>
</ul>
	
<script>
new Vue({
  el: '#app-1',
  data: {
    object: {
      FirstName: 'John',
      LastName: 'Doe',
      Age: 30
    }
  }
})
</script>
</body>
</html>

 

 

拼搏30天VUE.js之V-for（Part2）

5:(val, key, index) in object(val是值；key是鍵；index是當前元素的索引)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<ul id="app-1" class="demo">
<li v-for="(val, key, index) in object">{{index}}-{{key}}-{{val}}</li>
</ul>
	
<script>
new Vue({
  el: '#app-1',
  data: {
    object: {
      FirstName: 'John',
      LastName: 'Doe',
      Age: 30
    }
  }
})
</script>
</body>
</html>

拼搏30天VUE.js之V-for（Part2）

6：n in 5（循環）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app-1" class="demo">
  <span v-for="n in 5">{{ n }} </span>
</div>
	
<script>
new Vue({
  el: '#app-1'
})
</script>
</body>
</html>

拼搏30天VUE.js之V-for（Part2）

後機種辦法來自這連接：https://blog.csdn.net/huanzhulouzhu/article/details/77854755

7：$set通過input添加內容，然後直接在小哥哥後面添加相應添加的內容

​
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>

  <div id="app">  
    <input v-model="opt" @blur="add()"/>  
    <ul>  
      <li v-for="item in arr">  
        {{ item }}  
      </li>  
    </ul>  
  </div>  
  
<script>  
	new Vue({
  el: '#app',
  data: {
    arr: [ '美女', '小姐姐', '帥哥', '小哥哥' ],  
      opt: '' 
  },
	methods: {  
    add () {  
      this.$set(this.arr, this.arr.length, this.opt)  
    }  
  }  
})  
</script>
</body>
</html>

​

拼搏30天VUE.js之V-for（Part2）

8:數組用法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
     <input v-model="message">  
    <p>原始字符串: {{ message }}</p>  
    <p>计算后反转字符串: {{ reversedMessage }}</p>  
    <p>使用方法后反转字符串: {{ reversedMessage2() }}</p> 
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob123!'  
  },
	 computed: {  
    // 计算属性的 getter  
    reversedMessage: function () {  
      // `this` 指向 vm 实例  
      return this.message.split('').reverse().join('')  
    }  
  },  
  methods: {  
    reversedMessage2: function () {  
      return this.message.split('').reverse().join('')  
    }  
  }  
})
</script>
</body>
</html>

拼搏30天VUE.js之V-for（Part2）

9：computed的get()和set()用法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
     <select v-model="site">  
        <option value="Google http://www.google.com">Google http://www.google.com</option>  
        <option value="baidu http://www.baidu.co">baidu http://www.baidu.com</option>  
        <option value="网易 http://www.163.com">网易 http://www.163.com</option>  
    </select>  
    <p>name：{{name}}</p>  
    <p>url：{{url}}</p>   
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
     name: 'Google',  
      url: 'http://www.google.com' 
  },
	 computed: {  
     site: {  
      // getter  
      get: function () {  
        return this.name + ' ' + this.url  
      },  
      // setter  
      set: function (newValue) {  
        let names = newValue.split(' ')  
        this.name = names[0]  
        this.url = names[names.length - 1]  
      }  
	 }
  },  
 
})
</script>
</body>
</html>

拼搏30天VUE.js之V-for（Part2）

10：vue.js的过滤器fliter方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
 <input v-model="filterText"/>  
    <ul>  
      <li v-for="item in obj">  
        <span>{{myfilter(item.label)}}</span>  
      </li>  
    </ul>  
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
     obj: [  
        {value: 0, label: 'beijing'},  
        {value: 1, label: 'shanghai'},  
        {value: 2, label: 'guangdong'},  
        {value: 3, label: 'zhejiang'},  
        {value: 4, label: 'jiangshu'}  
      ],  
      filterText: ''  
  },
	 methods: {  
    myfilter (value) {  
      if (value.indexOf(this.filterText) > -1) {  
        return value  
      }  
    }  
  }  
})
</script>
</body>
</html>

拼搏30天VUE.js之V-for（Part2）

官網的解釋：https://www.w3cschool.cn/vuejs/i5qt1jsa.html

显示过滤/排序的结果

有时我们想显示过滤/排序过的数组，同时不实际修改或重置原始数据。有两个办法：

  1. 创建一个计算属性，返回过滤/排序过的数组；
  2. 使用内置的过滤器 filterBy 和 orderBy。

数组变动检测

变异方法

Vue.js 包装了被观察数组的变异方法，故它们能触发视图更新。被包装的方法有：

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

你可以打开浏览器的控制台，用这些方法修改上例的 items 数组。例如：example1.items.push({ message: 'Baz' })。

拼搏30天VUE.js之V-for（Part2）

替换数组

变异方法，如名字所示，修改了原始数组。相比之下，也有非变异方法，如 filter(), concat() 和 slice()，不会修改原始数组而是返回一个新数组。在使用非变异方法时，可以直接用新数组替换旧数组：

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

 

 

 

 

 

 

 

 

相关文章：

  • 2021-09-06
  • 2022-12-23
  • 2021-05-24
  • 2021-10-17
  • 2021-12-27
  • 2022-12-23
  • 2021-11-02
  • 2022-12-23
猜你喜欢
  • 2021-09-21
  • 2021-12-09
  • 2021-07-07
  • 2022-01-14
  • 2021-09-24
  • 2021-11-09
  • 2021-08-16
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode