v-bind/v-on/v-for結合練習

阿新 • • 發佈：2020-12-10

技術標籤：vue vue

v-bind/v-on/v-for結合練習

滑鼠點哪個電影其變為紅色，預設第一個紅色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>作業</title>
  <style>
    .Red {
      color: red;
    }
  </style>
</head>
<body>
<div id 
="app">
  <ul>
<!-- 在v-bind:class中，true/false判斷通過，當前點選的li的index和標誌currentIndex是否一樣來決定，預設情況下第一個亮-->
    <li v-for="(m,index) in movies" v-on:click="ulClick(index)" v-bind:class="{Red:index===currentIndex}">{{index}}-{{m}}</li>
  </ul> 

</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      movies: ['海賊王','海爾兄弟','火影忍者','進擊的巨人'],
      //當前點的li,預設是第一個
      currentIndex:0,
    },
    methods:{
      ulClick:function (index) {
        //點哪個將當前的的下標賦值給currentIndex 

        this.currentIndex = index;
      }
    }
  });
</script>
</body>
</html>

在這裡插入圖片描述

注意點

1.v-for=(item, index) in items不僅拿到了需要遍歷的元素，其下標的索引也得到了。

2.ulClick函式傳入這個index作為引數，設定一個標誌currentIndex用來顯示第幾個li需要變色。預設情況是第一個為紅色。

3.每次點選，將標誌修改為下標，然後class屬性裡的布林值，就可以通過index===currentIndex來判斷，點哪一個其li中的class就新增Red樣式。

v-bind/v-on/v-for結合練習

技術標籤：vuevue v-bind/v-on/v-for結合練習滑鼠點哪個電影其變為紅色，預設第一個紅色

00、Vue概述、HelloWorld程式、Mustache語法、v-html、v-on:click、v-for、v-bind動態繫結屬性、v-bind語法糖）

目錄1、Vue的概述和HelloWorld的使用2、模板語法2.1、插值操作2.2、v-bind指令的使用

vue.js中 v-for,v-on,v-model,結合應用案例---記事本

<!DOCTYPE html> <html> <head> <meta charset=\"utf-8\"> <title></title>

vue點選列表變亮（v-for和v-bind的結合）

技術標籤：# Vue v-for和v-bind的結合 <!DOCTYPE html> <html lang="en"> <head>

vue_點選列表項變色（結合v-for和v-bind來實現）

要求：點選列表中的哪一項，那麼該項文字變為紅色（結合v-for和v-bind來實現）

利用Vue的v-for和v-bind實現列表顏色切換

需求：在頁面上顯示四個列表，初始時字型為黑色。滑鼠點選某一個列表時，該列表的顏色變為紅色，其餘列表仍為黑色。

v-bind v-on 縮寫

Vue.js 為兩個最為常用的指令提供了特別的縮寫：

vue中使用v-bind="$attrs"和v-on="$listeners"進行多層元件通訊

vue元件之間通訊，我們可以使用props和vuex兩種方式，但是vuex太重，props在多級元件中使用又太麻煩，vue2.4版本提供了另一種方法，使用v-bind=\"$attrs\"，將父元件中不被認為 props特性繫結的屬性傳入子元件中，通

【vue開發】v-bind="$attrs" v-on="$listeners" 多層元件監聽

多級元件通訊，用vuex太重，props太麻煩。 vue 2.4 版本提供了另一種方法，使用 v-bind=”$attrs”, 將父元件中不被認為 props特性繫結的屬性傳入子元件中，通常配合 interitAttrs 選項一起使用。

12 小程式-計算屬性-塊級作用域-v-on/I/for/if引數-過濾器

1.計算屬性計算屬性完整寫法有set和get computed:{ //以下方式為計算屬性的簡寫 fullName:function () {

VUE-使用v-bind和v-for動態變換列表樣式

技術標籤：VUEvue <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8">

（學習VUE那些事）v-bind+v-for點選改變列表顏色

技術標籤：VUEvue.js 學習VUE記錄一些自己在VUE上面的點滴下面展示一些內聯程式碼片。

v-bind、v-on、v-show的綜合使用—圖片切換顯示

程式碼示例 <!DOCTYPE html> <html> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">

Vue指令03——v-bind和v-for的使用

Vue指令03——v-bind和v-for v-bind命令效果：更改元素屬性，如 src、title、href 格式：v-bind：屬性=”變數“

Vue v-bind動態繫結class例項方法

現在很多網站，都是希望動態切換class，更換css樣式。下面我們使用Vue的v-bind繫結class

詳解vue中v-bind:style效果的自定義指令

自定義指令 1.什麼是自定義指令以 v- 為字首，然後加上自己定義好的名字組成的一個指令就是自定義指令。為什麼要有自定義指令呢？在有些時候，你仍然需要對普通的DOM元素進行底層的操作，這個時候就可以用到自定義指

一文讀懂vue動態屬性資料繫結（v-bind指令）

v-bind的基本用法一、本節說明前面的章節我們學習瞭如何向頁面html標籤進行插值操作，那麼如果我們想動態改變html標籤的屬性，該怎麼辦呢？

詳解vue中v-model和v-bind繫結資料的異同

vue的模板採用DOM模板，也就是說它的模板可以當做DOM節點執行，在瀏覽器下不報錯，繫結資料有三種方式，一種是插值，也就是{{name}}的形式，一種是v-bind，還有一種是v-model。{{name}}的形式比較好理解，就是以文字

Vue屬性繫結指令 -- v-bind

Vue屬性繫結指令 -- v-bind 可簡寫為：普通屬性:頁面可解析為id=“4” <p v-bind:id="2*2">{{msg}}</p>

手寫vue中v-bind:style效果的自定義指令

自定義指令什麼是自定義指令以 v- 為字首，然後加上自己定義好的名字組成的一個指令就是自定義指令。為什麼要有自定義指令呢？在有些時候，你仍然需要對普通的DOM元素進行底層的操作，這個時候就可以用到自定義指