Heim > Artikel > Web-Frontend > vue.js-Anweisung v-zur Verwendung und Indexerfassung

vue.js-Anweisung v-zur Verwendung und Indexerfassung

高洛峰Original: 2016-12-08 09:43:552005Durchsuche

1.v-for

　 Laden Sie den Code direkt hoch.

Beispiel 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>
 <div id="didi-navigator">
 <ul>
  <li v-for="tab in tabs">
  {{ tab.text }}
  </li>
 </ul>
 </div>
 <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 new Vue({
  el: &#39;#didi-navigator&#39;,
  data: {
  tabs: [
   { text: &#39;巴士&#39; },
   { text: &#39;快车&#39; },
   { text: &#39;专车&#39; },
   { text: &#39;顺风车&#39; },
   { text: &#39;出租车&#39; },
   { text: &#39;代驾&#39; }
  ]
  }
 })
 </script>
</body>
</html>

2. Index

im v-for-Block Wir haben vollen Zugriff auf die Eigenschaften im Bereich der übergeordneten Komponente und es gibt eine spezielle Variable $index, die, wie Sie vermutet haben, der Index des aktuellen Array-Elements ist:

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

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

Zusätzlich können Sie einen Alias für den Index angeben (wenn v-for für ein Objekt verwendet wird, können Sie einen Alias für angeben der Schlüssel des Objekts):

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

Ab 1.0.17 können Sie das of-Trennzeichen verwenden, das näher an der JavaScript-Traverser-Syntax liegt:

d291014fffdfdcb849f87ad50f60179416b28748ea4df4d9c2150843fecfba68

Beispiel 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>
 <div v-if="isNaN(click)==false">
 <span>你点击的索引为: {{ click }}</span>
 </div>
 <div v-else>
 <p class="text-danger">试着点击上方LI条目</p>
 </div>
 <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 new Vue({
  el: &#39;body&#39;,
  data: {
  click: &#39;a&#39;,
  options: [
   { text: &#39;上海市&#39;, value: &#39;20&#39; },
   { text: &#39;湖北省&#39;, value: &#39;43&#39; },
   { text: &#39;河南省&#39;, value: &#39;45&#39; },
   { text: &#39;北京市&#39;, value: &#39;10&#39; }
  ]
  },
  methods:{
  getIndex:function($index){
   this.click=$index;
  }
  }
 });
 </script>
</body>
</html>

3. Holen Sie sich den Index im Klickereignis

Methode 1: Benutzerdefinierte Attribute hinzufügen

Beispiel 3:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
  a{display: block;}
 </style>
 </head>
 <body>
 <div>
  <a v-for="(index,item) in items" data-index="{{index}}" v-on:click="onclick" href="http://www.baidu.com">{{ item.text }}</a>
 </div>
 <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: &#39;body&#39;,
  data: {
  items: [
   { text: &#39;巴士&#39; },
   { text: &#39;快车&#39; },
   { text: &#39;专车&#39; },
   { text: &#39;顺风车&#39; },
   { text: &#39;出租车&#39; },
   { text: &#39;代驾&#39; }
  ]
  },
  methods: {
  onclick:function(event){
   event.preventDefault();
   let target = event.target
   console.log(target.getAttribute("data-index"));
   document.getElementById(&#39;index&#39;).value = target.getAttribute("data-index");
  }
  }
 })
 </script>
 </body>
</html>

Methode 2: Indexwert direkt übergeben

Beispiel 4 (ähnlich wie 2):

<!DOCTYPE html>
 
<html>
 
<head>
 
<meta charset="UTF-8">
 
<title></title>
 
<style type="text/css">
 
a{display: block;}
 
</style>
 
</head>
 
<body>
 
<div>
 
 <a v-for="(index,item) in items" v-on:click="onclick($index)" href="#">{{ item.text }}</a>
 
</div>
 
<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: &#39;body&#39;,
 
 data: {
 
 items: [
 
 { text: &#39;巴士&#39; },
 
 { text: &#39;快车&#39; },
 
 { text: &#39;专车&#39; },
 
 { text: &#39;顺风车&#39; },
 
 { text: &#39;出租车&#39; },
 
 { text: &#39;代驾&#39; }
 
 ]
 
 },
 
 methods: {
 
 onclick:function(index){
 
// index.preventDefault();
 
 console.log(index);
 
 document.getElementById(&#39;index&#39;).value = index;
 
}
 
 }
 
})
 
</script>
 
</body>
 
</html>

Der Effekt ist der gleiche wie bei Methode eins.

Wenn Sie den Index direkt übertragen möchten, können Sie die folgende Methode verwenden:

Beispiel 5:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
  a{display: block;}
 </style>
 </head>
 <body>
 <div>
  <a v-for="(index,item) in items" v-on:click="onclick($index)" href="javascript:void(0)">{{ item.text }}</a>
 </div>
 <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: &#39;body&#39;,
  data: {
  items: [
   { text: &#39;巴士&#39; },
   { text: &#39;快车&#39; },
   { text: &#39;专车&#39; },
   { text: &#39;顺风车&#39; },
   { text: &#39;出租车&#39; },
   { text: &#39;代驾&#39; }
  ]
  },
  methods: {
  onclick:function(index){
//   index.preventDefault();
   console.log(index);
   document.getElementById(&#39;index&#39;).value = index;
   window.location.href = "http://www.baidu.com";
  }
  }
 })
 </script>
 </body>
</html>

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Benutzerdefinierte Vue-Anweisungen implementieren das V-Tap-Plug-InNächster Artikel：Benutzerdefinierte Vue-Anweisungen implementieren das V-Tap-Plug-In

In Verbindung stehende Artikel

Mehr sehen