美文网首页
vue2.0for点击事件

vue2.0for点击事件

作者: zane626 | 来源:发表于2017-03-01 17:29 被阅读0次

以下是我自己的理解

第一种情况:数据是json格式

HTML:

  <ul>
    <li v-for="(item,index) in items"><!-- 这里可以使用in  也可以使用of -->
      <p>姓名:{{item.name}}</p>
      <p>年龄:{{item.age}}</p>
      <p>这是第几个:{{index}}</p>
    </li>
  </ul>

Js

 data () {
    return {
      items:[{"name":"张三","age":"18"},
            {"name":"李四","age":"17"},
            {"name":"王五","age":"19"}]
    }
  }

输出结果

姓名:张三
年龄:18
这是第几个:0
姓名:李四
年龄:17
这是第几个:1
姓名:王五
年龄:19
这是第几个:2

第二种情况:数据是数组

HTML:

  <ul>
    <li v-for="(value,key) in items">
        <p>内容:{{value}}key:{{key}}</p>
    </li>
  </ul>

JS:

 data () {
    return {
      items:[1,2,3,4,5,7]
    }
  }

输出结果

内容:1key:0
内容:2key:1
内容:3key:2
内容:4key:3
内容:5key:4
内容:7key:5

第三种情况:数据是{"key":"value"}

HTML:

 <ul>
    <li v-for="(value,key,index) in items">
        <p>value:{{value}}</p>
        <p>key:{{key}}</p>
        <p>index:{{index}}</p>
    </li>
  </ul>

JS:

 data () {
    return {
      items:{"a":"3","b":"1","c":"2","d":"4"}
    }
  }

输出结果:

value:3
key:a
index:0
value:1
key:b
index:1
value:2
key:c
index:2
value:4
key:d
index:3

相关文章

  • vue2.0for点击事件

    以下是我自己的理解 第一种情况:数据是json格式 HTML: Js 输出结果 第二种情况:数据是数组 HTML:...

  • 8.点击事件的分发机制

    问题: listview控件点击事件,添加了长按点击事件和点击事件,发现,长按点击事件执行之后点击事件也被触发了。...

  • 点击事件

    var a = document.getElementById('anniu'); var c = documen...

  • 点击事件

    case R.id.btnBelongTown:geTown();openFilterTypeTown();bre...

  • 点击事件

    点击事件写的位置 以及文档加载

  • 点击事件

    vue的文档非常垃圾不要去百度 以@为族 @click.stop 防止事件冒泡 @click.native 清楚n...

  • 数据埋点之六:埋点需求设计

    主要埋点事件: 点击事件点击事件,用户点击按钮即算点击事件,不管点击后有无结果;点击一次记一次。 曝光事件成功打开...

  • (四)react事件

    一、 添加点击事件onClick 点击事件传递参数 二、es6语法传参 添加点击事件onClick 点击事件传递参数

  • 点击a标签触发点击事件后下载文件

    a标签 a标签下载文件 点击下载 添加点击事件 点击下载 因为 点击事件先于href执行 当点击事件返回true时...

  • 鼠标事件

    1. 鼠标事件 // 点击事件 onclick // 双击事件 ondblclick // 鼠标右键点击事件 on...

网友评论

      本文标题:vue2.0for点击事件

      本文链接:https://www.haomeiwen.com/subject/mxhcgttx.html