vue.js에서 v-for를 사용하는 방법과 색인을 얻는 방법은 무엇입니까?-View.js-php.cn

vue.js에서 v-for를 사용하는 방법과 색인을 얻는 방법은 무엇입니까?

青灯夜游

풀어 주다： 2020-11-02 17:57:50

앞으로

5837명이 탐색했습니다.

다음 Vue.js 튜토리얼 칼럼에서는 vue.js에서 v-for 및 인덱스 획득을 사용하는 방법을 안내합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

vue.js에서 v-for를 사용하는 방법과 색인을 얻는 방법은 무엇입니까?

2.x 버전:

v-for="(item,index) in items"

로그인 후 복사

index는 인덱스 값입니다.

==========================줄 구분==================== == ==========

1.x 버전:

1.v-for

예 1:

<!DOCTYPE html><html><head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title></head><body>
    <p id="didi-navigator">
        <ul>
            <li v-for="tab in tabs">
                {{ tab.text }}            </li>
        </ul>
    </p>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        new Vue({
            el: '#didi-navigator',
            data: {
                tabs: [
                    { text: '巴士' },
                    { text: '快车' },
                    { text: '专车' },
                    { text: '顺风车' },
                    { text: '出租车' },
                    { text: '代驾' }
                ]
            }
        })    </script></body></html>

로그인 후 복사

2 . Index

v-for 블록 내에서 상위 구성 요소 범위의 속성에 대한 전체 액세스 권한을 가집니다. 특수 변수 $index는 현재 배열 요소의 인덱스입니다. 또한 인덱스 An 별칭을 지정할 수 있습니다(객체에 v-for를 사용하는 경우 개체 키에 대한 별칭을 지정할 수 있습니다).

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

로그인 후 복사

1.0.17부터 of 구분 기호를 사용할 수 있습니다. JavaScript 트래버스 구문에 더 가깝습니다:

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

로그인 후 복사

예제 2:

<p v-for="(index, item) in items">
  {{ index }} {{ item.message }}</p>

로그인 후 복사

3. 클릭 이벤트에서 인덱스 가져오기

방법 1: 사용자 정의 속성 추가

예제 3:

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

로그인 후 복사

방법 2: 인덱스 값을 직접 전달

　 예시 4(2와 유사):

<!DOCTYPE html><html><head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title></head><body>
    <ul>
        <li v-for="option in options">
            <p class="text-success" v-on:click="getIndex($index)">Text:{{option.text}}--Vlue:{{option.value}}</p>
        </li>
    </ul>
    <p v-if="isNaN(click)==false">
        <span>你点击的索引为: {{ click }}</span>
    </p>
    <p v-else>
        <p class="text-danger">试着点击上方LI条目</p>
    </p>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        new Vue({
            el: 'body',
            data: {
                click: 'a',
                options: [
                    { text: '上海市', value: '20' },
                    { text: '湖北省', value: '43' },
                    { text: '河南省', value: '45' },
                    { text: '北京市', value: '10' }
                ]
            },
            methods:{
                getIndex:function($index){                    this.click=$index;
                }
            }
        });    </script></body></html>

로그인 후 복사

　 효과는 방법 1과 동일합니다.

　하지만 링크가 있는 경우:

인덱싱과 충돌하지는 않지만 점프된 링크에 대해 추가 작업을 수행하려는 경우 점프 이벤트를 방지할 수 없습니다.

인덱스를 직접 전송하려는 경우 다음 방법을 사용할 수 있습니다.

예시 5:

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            a{display: block;}
        </style>
    </head>
    <body>
        <p>
               <a v-for="(index,item) in items" data-index="{{index}}" v-on:click="onclick" href="http://www.baidu.com">{{ item.text }}</a>
        </p>
        <input type="text" name="" id="index" value=""/>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        new Vue({
            el: 'body',
            data: {
                items: [
                    { text: '巴士' },
                    { text: '快车' },
                    { text: '专车' },
                    { text: '顺风车' },
                    { text: '出租车' },
                    { text: '代驾' }
                ]
            },
            methods: {
                onclick:function(event){
                    event.preventDefault();
                    let target = event.target
                    console.log(target.getAttribute("data-index"));
                    document.getElementById('index').value = target.getAttribute("data-index");
                }
            }
        })    </script>
    </body></html>

로그인 후 복사

보충:

4. 버전 2.0 및 1.x

　버전 2.0의 예 5:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">a{display: block;}</style></head><body><p>

    <a v-for="(index,item) in items" v-on:click="onclick($index)" href="#">{{ item.text }}</a></p><input type="text" name="" id="index" value=""/><script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">

     new Vue({

    el: 'body',

    data: {

     items: [

     { text: '巴士' },

     { text: '快车' },

     { text: '专车' },

     { text: '顺风车' },

     { text: '出租车' },

     { text: '代驾' }

     ]

     },

    methods: {

     onclick:function(index){//      index.preventDefault();
    console.log(index);

    document.getElementById('index').value = index;

}

    }

})</script></body></html>

로그인 후 복사

　변경 사항은 다음과 같습니다.

el处需id，写body报错；
参数index需写在item后面；
作为事件参数时不用加$符。

　　此外，也可以提供第二个的参数为键名：

<p v-for="(value, key) in object">

  {{ key }} : {{ value }}</p>

로그인 후 복사

　　第三个参数为索引：

<p v-for="(value, key, index) in object">

  {{ index }}. {{ key }} : {{ value }}</p>

로그인 후 복사

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程教学！！

위 내용은 vue.js에서 v-for를 사용하는 방법과 색인을 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

vue.js에서 v-for를 사용하는 방법과 색인을 얻는 방법은 무엇입니까?