vue中v-for 循环对象中的属性

目录
  • 1、循环对象内的值
  • 2、循环对像
  • 3、循环键和值

1、循环对象内的值

<body>

    <div id="app">

        <!-- 循环对象内的值 -->

        <ul>

            <li v-for="item in per">

                {{item}}

            </li>

        </ul>

    </div>

    <script src="./js/vue.js"></script>

    <script>

        let vm =new Vue({

            el:'#app',

            data:{

                per:{

                    id:1,

                    name:'小明',

                    age:19,

                    sex:"男"

                }

            }

        })

    </script>

2、循环对像

3、循环键和值

<!-- 循环键和值 -->

        <ul>

                    <!-- 值    键 -->

            <li v-for="(value,key) in per">

                {{value}}---{{key}}

            </li>

        </ul>

到此这篇关于 vue中v-for 循环对象中的属性的文章就介绍到这了,更多相关 v-for 循环对象中的属性内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue中v-for更新检测的操作方法

    口诀: 数组变更方法,就会导致 v-for 更新,页面更新 数组非变更方法:返回新数组,就不会导致 v-for 更新,更新值检测不到可采用覆盖或者 this.$set() 数组变更方法如下: 1. arr.push()从后面添加元素 arr.push(5) 2. arr.pop()从后面删除元素,只能是一个 arr.pop() 3. arr.shift()从前面删除元素,只能删除一个 arr.shift() 4. arr.unshift()从前面添加元素,返回值时添加完后数组长度 arr.uns

  • 详解vue中v-for的key唯一性

    详解vue中v-for的key唯一性

    1. DOM Diff 要想真正了解 key 属性的存在意义,还真得从 DOM Diff 说起,并不需要深入了解 DOM Diff 的原理,而是仅仅需要知道 DOM Diff 的工作过程即可. Vue 和 React 都采用了运用虚拟 DOM 的方式减少浏览器不必要的渲染.由于 Vue 和 React 采用的都是 v = render( m ) 的方式渲染视图的,当 model 数据发生变化时,视图更新的方式就是重新 render DOM 元素.但是有时候我们只是改变了一个组件中的某一个 div

  • vue中v-for指令完成列表渲染

    vue中v-for指令完成列表渲染

    目录 1.列表遍历 2.Vue中key的作用 3.列表过滤 本文就Vue中列表渲染做个简单总结和使用演示: 列表渲染是用v-for指令根据绑定一组元素的选项来完成的,渲染格式可以自定义. 1.列表遍历 最基本的使用案例1: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compa

  • 深入浅析Vue.js 中的 v-for 列表渲染指令

    1 基本用法 当遍历一个数组或枚举一个对象进行迭代循环展示时,就会用到列表渲染指令 v-for. 它的表达式需要结合 in 来使用,类似 item in items 的形式. 1.1 遍历数组 html: <div id="app"> <ul> <li v-for="n in news">{{n.title}}</li> </ul> </div> js: <script> var a

  • 详解vuejs之v-for列表渲染

    详解vuejs之v-for列表渲染

    Vue.js是一个构建数据驱动的web界面的库.重点集中在MVVM模式的ViewModel层,因此非常容易与其它库或已有项目整合 Vue.js 的核心是一个响应的数据绑定系统,它让数据与DOM保持同步非常简单 如下列表展示,当我们从后端接口或者json文件使用ajax获取数据之后现实到页面,我们有n中方式去把数据渲染到页面 1.使用js的for循环去遍历填充 2.ng的ng-repeat 今天我们使用vue.js的v-for 一.html <div class="shop_list_box

  • vue中v-for 循环对象中的属性

    vue中v-for 循环对象中的属性

    目录 1.循环对象内的值 2.循环对像 3.循环键和值 1.循环对象内的值 <body> <div id="app"> <!-- 循环对象内的值 --> <ul> <li v-for="item in per"> {{item}} </li> </ul> </div> <script src="./js/vue.js"></scrip

  • vue中watch监听对象中某个属性的方法

    目录 immediate 和 handler deep 深度监听 以currentParams为例,监听selOrgId属性 immediate 和 handler watch 的用法有个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行.如果我们需要在最初绑定值得时候也执行函数,就需要用到 immediate 属性. 'currentParams.selOrgId': { handler(newV, oldV) { console.log("watch", ne

  • 详解javaweb中jstl如何循环List中的Map数据

    详解javaweb中jstl如何循环List中的Map数据

    详解javaweb中jstl如何循环List中的Map数据 第一种方式: 1:后台代码(测试) List<Map<String, Object>> list = new ArrayList<Map<String,Object>>(); Map<String, Object> map = null; for (int i = 0; i < 4; i++) { map = new HashMap<String, Object>();

  • Vuex给state中的对象新添加属性遇到的问题及解决

    目录 Vuex给state中的对象新添加属性遇到的坑 向vuex对象中增加新的属性需要注意 总结 Vuex给state中的对象新添加属性遇到的坑 state.js中有一个空对象obj: export default {   ...   obj: {} } 在App.vue中点击“给空对象增加属性”按钮,触发事件addObjAttr: <template>   <div id="app">     ...     <button @click="a

  • python中requests库session对象的妙用详解

    在进行接口测试的时候,我们会调用多个接口发出多个请求,在这些请求中有时候需要保持一些共用的数据,例如cookies信息. 妙用1 requests库的session对象能够帮我们跨请求保持某些参数,也会在同一个session实例发出的所有请求之间保持cookies. 举个栗子,跨请求保持cookies,在命令行上输入下面命令: # 创建一个session对象 s = requests.Session() # 用session对象发出get请求,设置cookies s.get('http://ht

  • vue中的循环对象属性和属性值用法

    v-for除了可以循环数组,还可以循环对象. 例子: <template> <div> <div v-for="(item,i) in obj">{{i}}--{{item}}</div> </div> </template> <script> export default { name: "HelloWorld", data () { return { obj:{ age:1, n

  • 解决vue中的无限循环问题

    项目中遇到了这样一个问题:每一种产品有对应的服务费,每一个商家有多种商品要单独计算每一家的服务费,最后汇总总的服务费用.我直接写了一个方法来计算出每个商家和总的服务费用并return出来.如果不看控制台的话运行是没问题的.但是控制台报了无限循环的错误. 下面是错误代码 html: js: 这里会出现无限循环的原因是数据更新触发计算方法来更新视图,视图更新又反过来触发这个方法更新数据.所以尽量不要直接在绑定的数据上使用方法来绑定.找到问题后下面就是解决办法. 因为选中商品后就要重新计算价格.所以我

  • vue中的for循环以及自定义指令解读

    vue中的for循环以及自定义指令解读

    目录 vue for循环及自定义指令 v-for 自定义指令 vue自定义指令动态参数 通过自定义指令中的修饰符的key作为值,更改显示的颜色 vue for循环及自定义指令 v-for 1.v-for用来循环的数组怎么发生变化可以被vue检测到: push.pop.shift.unshift.splice.sort.reverse等方法可以被检测到 vue对于这些方法的处理是重写了这些方法,并在最后会触发一次notify方法来通知这个array已经发生变化 vue还增加了两个方法来观测arra

  • vue中复用vuex.store对象的定义

    目录 复用vuex.store对象的定义 1. 共用的store定义 2. 组件1 3. 组件2 vuex中的store 1. Vuex是什么 2. Store 3. 一个完整的Store结构 4. 状态管理的几个核心概念 5. store与$store的区别 复用vuex.store对象的定义 我有几个组件,都需要用到vuex.store,而且这几个组件结构极其类似,就在想,能不能复用store的对象定义?因为每个组件都定义一遍,繁琐,且没必要. 主要是用到克隆组件.具体代码如下: 1. 共用

  • VUE中的无限循环代码解析

    VUE中的无限循环代码解析

    代码如下所示: <template> <div id=""> <ul v-for="(item,index) in listaaa"> <li v-if='dealFun(item.cdate,index)'>{{item.cdate}}</li> </ul> </div> </template> <script> export default { name:

随机推荐