精华内容
下载资源
问答
  • Vue列表渲染

    千次阅读 多人点赞 2021-01-23 17:10:39
    Vue列表渲染      v-for指令      计算属性      侦听属性 v-for指令     1. v-for指令的使用 v-for指令需要使用“ ...

    Vue列表渲染

         v-for指令
         计算属性
         侦听属性




    v-for指令

        1. v-for指令的使用

    v-for指令需要使用“ item in items ”形式的特殊语法,items 是源数据数组,item 是被迭代数组的元素的别名。为了给Vue一个提示,以便它能跟踪每一行数据,从而重用和重新排序现有元素,v-for 指令需要为每一项提供一个唯一 key 属性。


        2. 样例 Demo1

    在这里插入图片描述

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<script src="../js/vue.min.js"></script>
    		
    	</head>
    <body>
    	<div id="app">
    		<ul>
    			<li v-for="(item,index) in items":key="index">
    				<a href="">{{index}}.{{item}}</a>
    			</li>
    		</ul>
    	</div>
    		<script type="text/javascript">
    			var vm=new Vue({
    				el:"#app",
    				data:{
    					items:[
    						"员工部门","项目助理","员工管理"
    					]
    				}
    			})
    		</script>
    </body>
    </html>
    

        3. 样例 Demo2

    在这里插入图片描述

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<script src="../js/vue.min.js"></script>
    		
    	</head>
    <body>
    	<div id="app">
    		<table border="soild 1px black">
    			<thead>
    				<td>序号</td>
    				<td>姓名</td>
    				<td>年龄</td>
    			</thead>
    			<tbody>
    				<tr v-for="(item,index) in items":key="index.id">
    					<td>{{index}}</td>
    					<td>{{item.name}}</td>
    					<td>{{item.age}}</td>
    					
    				</tr>
    			</tbody>
    		</table>
    	</div>
    		<script>
    			var vm=new Vue({
    				el:"#app",
    				data:{
    					items:[{
    						id:1,name:"张三",age:18
    					},{
    						id:2,name:"柳柳",age:20
    					},{
    						id:3,name:"王五",age:19
    					}]
    				}
    			})
    		</script>
    </body>
    </html>
    




    计算属性

        1. 计算属性

    Vue.js 提供了计算属性的方法。在计算属性里可以完成各种复杂的逻辑,包括运算,函数调用等,最终会返回结果。计算属性还可以依赖多个Vue实例的数据,只要其中任一数据发生变化,计算属性就会重新执行,视图也会更新。所有的计算属性都以函数的形式写在Vue实例内的 computed 选项中,最终返回计算后的结果。


        2. 样例 Demo

    在这里插入图片描述

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<script src="../js/vue.min.js"></script>
    		
    	</head>
    <body>
    	<div id="app">
    		<p>原字符串:{{message}}</p>
    		<p>字符串转换后:{{reversedMessage}}</p>
    	</div>
    		<script>
    			var vm=new Vue({
    				el:"#app",
    				data:{
    					message:"The hunter who tracks the deer can't see the mountain."
    				},
    				
    				computed:{
    					reversedMessage:function(){
    						return this.message.split("").reverse().join("");
    					}
    				}
    			})
    				
    			
    		</script>
    </body>
    </html>
    




    侦听属性

        1.侦听属性

    当有一些数据需要随着其他数据的变动而变动时,就可以使用侦听属性watchwatch是一个对象,其中watch对象的属性是需要侦听的目标,一般data中的某个数据项,而watch对象的属性值是一个函数,是当被侦听的数据项发生变化时需要执行的函数。这个函数有两个形参:第一个值:当前值;第二个值:更新后的值。


        2. 样例 Demo

    在这里插入图片描述

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<script src="../js/vue.min.js"></script>
    		
    	</head>
    <body>
    	<div id="app">
    		<h1>员工信息</h1>
    		<p>
    			<label for="name">姓名:</label>
    			<input type="text" v-model="name"/>
    			<span>{{nameTip}}</span>
    		</p>
    		<p>
    			<label for="emile">邮箱:</label>
    			<input type="text" v-model="emile"/>
    			<span>{{emileTip}}</span>
    		</p>
    		<p>
    			<label for="phone">电话:</label>
    			<input type="text" v-model="phone"/>
    			<span>{{phoneTip}}</span>
    		</p>
    		
    	</div>
    		<script>
    			var vm=new Vue({
    				el:"#app",
    				data:{
    					name:"",
    					emile:"",
    					phone:"",
    					nameTip:"",
    					emileTip:"",
    					phoneTip:""
    				},
    				
    				watch:{
    					name:function(newVal){
    						if(newVal!=""){
    							this.nameTip="姓名输入正确";
    						}else{
    							this.nameTip="姓名不能为空"
    						}
    					},
    					emile:function(newVal){
    						if(newVal!=""){
    							this.emileTip="邮箱输入正确";
    						}else{
    							this.emileTip="邮箱不能为空"
    						}
    					},
    					phone:function(newVal){
    						if(newVal!=""){
    							this.phoneTip="电话输入正确";
    						}else{
    							this.phoneTip="电话不能为空"
    						}
    					}
    				}
    			})
    				
    			
    		</script>
    </body>
    </html>
    
    展开全文
  • vue列表渲染

    2021-04-02 17:06:28
    vue列表渲染 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...

    欢迎访问个人博客http://www.jkraise.top

    vue列表渲染

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>列表渲染</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <style>
        
            div {
                text-transform: capitalize;
            }
            /* 
            vue 提供了 7种数组 操作方法
            push  往数组里 增加一条 最后
            pop 删除数组最后一项
            shift  删除数组第一项
            unshift  在数组里 增加一条 最前
            spilce  数组截取
            sort 数组排序
            reverse  数组取反
             */
        </style>
    </head>
    <body>
        <div id="app">
            <div  v-for='(item,index) of colorList' :key='index'><h3>{{item}}--{{index}}</h3></div>
        </div>
        <script>
            var app = new Vue({
                el:'#app',
                template:'',
                data:{
                    colorList:['a','b','c','d','e','f','g']
                },
                
            })
        </script>
    </body>
    </html>
    

    转载于:https://www.cnblogs.com/suni1024/p/11540158.html

    展开全文
  • Vue 列表渲染

    2019-09-13 15:15:32
    用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组,item 是数组元素迭代的别名。 <ul id="example-1"> <li v-for="item in items...

    v-for 把一个数组对应为一组元素

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

    v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组,item 是数组元素迭代的别名。

    <ul id="example-1">
      <li v-for="item in items">
        {{ item.message }}
      </li>
    </ul>
    
    var example1 = new Vue({
      el: '#example-1',
      data: {
        items: [
          { message: 'Foo' },
          { message: 'Bar' }
        ]
      }
    })
    

    在 v-for 块中,我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。

    <ul id="example-2">
      <li v-for="(item, index) in items">
        {{ parentMessage }} - {{ index }} - {{ item.message }}
      </li>
    </ul>
    
    var example2 = new Vue({
      el: '#example-2',
      data: {
        parentMessage: 'Parent',
        items: [
          { message: 'Foo' },
          { message: 'Bar' }
        ]
      }
    })
    

    也可以用 of 替代 in 作为分隔符,因为它是最接近 JavaScript 迭代器的语法:

    <div v-for="item of items"></div>
    

    一个对象的 v-for

    你也可以用 v-for 通过一个对象的属性来迭代。

    <ul id="v-for-object" class="demo">
      <li v-for="value in object">
        {{ value }}
      </li>
    </ul>
    
    new Vue({
      el: '#v-for-object',
      data: {
        object: {
          firstName: 'John',
          lastName: 'Doe',
          age: 30
        }
      }
    })
    

    你也可以提供第二个的参数为键名:

    <div v-for="(value, key) in object">
      {{ key }}: {{ value }}
    </div>
    

    还可以提供第三个参数为索引:

    <div v-for="(value, key, index) in object">
      {{ index }}. {{ key }}: {{ value }}
    </div>
    

    在遍历对象时,是按 Object.keys() 的结果遍历,但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。

    key

    当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。

    这个默认的模式是高效的,但只适用于不依赖子组件状态或临时 DOM 状态 (例如:表单输入值) 的列表渲染输出。

    为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。

    理想的 key 值是每项都有的且唯一的 id。需要用 v-bind 来绑定动态值 (在这里使用简写):

    <div v-for="item in items" :key="item.id">
      <!-- 内容 -->
    </div>
    

    建议尽可能在使用 v-for 时提供 key,除非遍历输出的 DOM 内容非常简单,或者是刻意依赖默认行为以获取性能上的提升。

    key 是 Vue 识别节点的一个通用机制,key 并不与 v-for 特别关联,key 还具有其他用途,我们将在后面的指南中看到其他用途。

    数组更新检测

    变异方法

    变异方法 (mutation method),顾名思义,会改变被这些方法调用的原始数组。

    Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新。

    这些方法如下:

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

    用前面例子的 items 数组调用变异方法:

    example1.items.push({ message: 'Baz' })
    

    替换数组

    相比之下,也有非变异 (non-mutating method) 方法,例如:filter(), concat() 和 slice() 。这些不会改变原始数组,但总是返回一个新数组。

    当使用非变异方法时,可以用新数组替换旧数组:

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

    你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是,事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的、启发式的方法,所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

    注意事项

    由于 JavaScript 的限制,Vue 不能检测以下变动的数组:

    1. 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 。
    2. 当你修改数组的长度时,例如:vm.items.length = newLength 。

    为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果,同时也将触发状态更新:

    // Vue.set
    Vue.set(example1.items, indexOfItem, newValue)
    

    或者

    // Array.prototype.splice
    example1.items.splice(indexOfItem, 1, newValue)
    

    为了解决第二类问题,你可以使用 splice:

    example1.items.splice(newLength)
    

    对象更改检测注意事项

    还是由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除:

    var vm = new Vue({
      data: {
        a: 1
      }
    })
    // `vm.a` 现在是响应式的
    
    vm.b = 2
    // `vm.b` 不是响应式的
    

    对于已经创建的实例,Vue 不能动态添加根级别的响应式属性。但是,可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。例如,对于:

    var vm = new Vue({
      data: {
        userProfile: {
          name: 'Anika'
        }
      }
    })
    

    你可以添加一个新的 age 属性到嵌套的 userProfile 对象:

    Vue.set(vm.userProfile, 'age', 27)
    

    你还可以使用 vm.$set 实例方法,它只是全局 Vue.set 的别名:

    vm.$set(vm.userProfile, 'age', 27)
    

    有时你可能需要为已有对象赋予多个新属性,比如使用 Object.assign() 或 _.extend()。

    在这种情况下,你应该用两个对象的属性创建一个新的对象,然后替换。

    所以,如果你想添加多个新的响应式属性,不要像这样:

    Object.assign(vm.userProfile, {
      age: 27,
      favoriteColor: 'Vue Green'
    })
    

    你应该这样做:

    vm.userProfile = Object.assign({}, vm.userProfile, {
      age: 27,
      favoriteColor: 'Vue Green'
    })
    

    显示过滤/排序结果

    有时,我们想要显示一个数组的过滤或排序副本,而不实际改变或重置原始数据。在这种情况下,可以创建返回过滤或排序数组的计算属性。

    <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
        })
      }
    }
    

    在计算属性不适用的情况下 (例如,在嵌套 v-for 循环中) 你可以使用一个 method 方法。

    <li v-for="n in even(numbers)">{{ n }}</li>
    
    data: {
      numbers: [ 1, 2, 3, 4, 5 ]
    },
    methods: {
      even: function (numbers) {
        return numbers.filter(function (number) {
          return number % 2 === 0
        })
      }
    }
    

    一段取值范围的 v-for

    v-for 也可以取整数。在这种情况下,它将重复多次模板。

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

    结果:

    1 2 3 4 5 6 7 8 9 10
    

    v-for 和 <template>

    类似于 v-if,你也可以利用带有 v-for 的 <template> 渲染多个元素。比如:

    <ul>
      <template v-for="item in items">
        <li>{{ item.msg }}</li>
        <li class="divider"></li>
      </template>
    </ul>
    

    v-for 和 v-if

    当它们处于同一节点,v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你想为仅有的一些项渲染节点时,这种优先级的机制会十分有用,如下:

    <li v-for="todo in todos" v-if="!todo.isComplete">
      {{ todo }}
    </li>
    

    而如果你的目的是有条件地跳过循环的执行,那么可以将 v-if 置于外层元素 (或 <template>)上。如:

    <ul v-if="todos.length">
      <li v-for="todo in todos">
        {{ todo }}
      </li>
    </ul>
    <p v-else>No todos left!</p>
    

    v-for 用于组件

    当在组件中使用 v-for 时,key 现在是必须的。

    然而,任何数据都不会被自动传递到组件里,因为组件有自己独立的作用域。为了把迭代数据传递到组件里,我们要用 props :

    <my-component
      v-for="(item, index) in items"
      v-bind:item="item"
      v-bind:index="index"
      v-bind:key="item.id"
    ></my-component>
    

    不自动将 item 注入到组件里的原因是,这会使得组件与 v-for 的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。

    下面是一个简单的 todo list 的完整例子:

    <div id="todo-list-example">
      <input
        v-model="newTodoText"
        v-on:keyup.enter="addNewTodo"
        placeholder="Add a todo"
      >
      <ul>
        <li
          is="todo-item"
          v-for="(todo, index) in todos"
          v-bind:key="todo.id"
          v-bind:title="todo.title"
          v-on:remove="todos.splice(index, 1)"
        ></li>
      </ul>
    </div>
    

    注意: 这里的 is="todo-item" 属性。这种做法在使用 DOM 模板时是十分必要的,因为在

    • 元素内只有
    • 元素会被看作有效内容。这样做实现的效果与 <todo-item> 相同,但是可以避开一些潜在的浏览器解析错误
    Vue.component('todo-item', {
      template: '\
        <li>\
          {{ title }}\
          <button v-on:click="$emit(\'remove\')">X</button>\
        </li>\
      ',
      props: ['title']
    })
    
    new Vue({
      el: '#todo-list-example',
      data: {
        newTodoText: '',
        todos: [
          {
            id: 1,
            title: 'Do the dishes',
          },
          {
            id: 2,
            title: 'Take out the trash',
          },
          {
            id: 3,
            title: 'Mow the lawn'
          }
        ],
        nextTodoId: 4
      },
      methods: {
        addNewTodo: function () {
          this.todos.push({
            id: this.nextTodoId++,
            title: this.newTodoText
          })
          this.newTodoText = ''
        }
      }
    })
    展开全文
  • VUE列表渲染

    2020-06-05 09:59:31
    列表渲染 数组 <li v-for="(item, index) of/in items" v-bind:key="item.id"> {{ item }}---{{index}}</li> 为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要...

    列表渲染

    数组

    <li v-for="(item, index) of/in items" v-bind:key="item.id"> {{ item }}---{{index}}</li>

    为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key attribute

    改变数组内容,让页面响应变化:

    • 变更方法push();pop();shift();unshift();splice();sort();reverse()

         非变更方法filter()concat()slice()不会变更原始数组,而总是返回一个新数组

    • 改变数据的引用地址vm.list=[{id="",text=""},{id="",text=""},{id="",text=""}]
    • set方法

    template可以理解成一个模版,占位符,帮助我们去包裹一些元素,但在循环的过程中并不会被真正的渲染到页面上。也可以用 

    对象

    <div v-for="(value, name, index) of object"> {{ value }} </div>


    set方法

    Vue.set(target,propertyName/index,value)

            向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新。

    vm.$set(target,propertyName/index,value) 是全局 Vue.set 的别名

    展开全文
  • vue 列表渲染

    2020-03-03 16:29:51
    目录: v-for指令: 基本指令 ...我们用v-for指令根据一组数组的选项列表进行渲染。v-for指令需要以item in items形式的特殊语法,items是源数据数组并且item是数组元素迭代的别名。 demo: &l...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,815
精华内容 1,526
关键字:

vue列表渲染

vue 订阅