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

阿新 • • 發佈：2021-02-13

技術標籤：# Vue

v-for和v-bind的結合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .red{
            color: red;

        }
        ul li{
            cursor: pointer;
        }
     
</style>
</head>
<body>
    <div id="app">
        <ul>
            <!--<li v-for="(item,index) in movies">{{index}}-{{item}}</li>-->
            <li :class="{red:i === index}" v-for="(item,index) in movies" @click 
="go(index)">{{item}}</li>
        </ul>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                movies: ['海王','海爾兄弟','火隱忍者','進擊的巨人'],
                i: 
 -1
            },
            methods:{
                go:function (index) {
                    this.i = index
                }
            }
        })

    </script>
</body>
</html>

效果
在這裡插入圖片描述

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:點選列表切換顏色

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

vue 點選獲取滑鼠座標（滑鼠位置）

技術標籤：Vue獲取滑鼠座標 <button @click="getMouseXY($event)">點選獲取滑鼠座標</button>

Vue 點選列表中某一個變色案例

技術標籤：vue.js Vue點選列表中某一個變色案例 v-bind v-for v-on的使用題目要求：

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

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

vue中v-for和v-if一起使用

版本 vue 2.9.6 element-ui: 2.15.6 目標效果說明在 vue 2.x 中，在一個元素上同時使用 v-if 和 v-for 時，v-for 會優先作用

vue實現點選樣式高亮

•在data中定義即將渲染的資料，及active data(){ return{ active:\'\',//選中樣式 }; }, 1 2 3 4 5

Vue點選頁面詳情後返回，停留在原始位置，且不重新整理（使用keep-alive實現）

技術標籤：vue 場景： pageOne頁面是一個商品列表頁面，在這個頁面點選商品，就會跳轉到pageTwo商品詳細頁面。此時再從pageTwo頁面返回到pageOne頁面時，pageOne頁面需要做到： 1.記錄pageOne之前的滾動的距離。

Vue學習——實現點選列表改變顏色

技術標籤：Vue學習vuehtmlvue.js Vue實現點選列表改變其中一項的顏色需求程式碼解決思路完整程式碼成果圖

vue點選子選單，父選單高亮顯示，圖示切換

1 <template> 2 3<div class=\"sidebar\"> 4<el-menu class=\"sidebar-el-menu\" :default-active=\"activeMenu\"text-color=\"#36BFF3\" active-text-color=\"#fff\" unique-opened router@s

Vue -- vant tabbar 點選切換高亮

在 vue-cli 移動專案中，使用 vant 底部切換，例如：/mine 和 /mine/collect 都需要\"我的\"高亮，點選\"我的\"，回到 /mine 頁面。使用vant文件中的 tabbar change 方法，點選\"我的\"不能觸發 change 事件，所以可

element-ui table行點選獲取行索引（index）並利用索引更換行順序

1)將每一行的索引插入操作行中，即為每一行資料新增一個屬性index 使用el-table已經給處的方法：tableRowClassName

vue點選標籤切換選中及互相排斥操作

單身和已婚不能同時選中，不瞭解保險和已瞭解保險不能同時選中。同時各個標籤點選可以取消選擇

Vue點選切換Class變化,實現Active當前樣式操作

剛入門Vue沒多久，在製作過程中遇到很多簡單實用的小技巧。沒有太多的墨水，直接上程式碼：

vue 點選其他區域關閉自定義div操作

方法一：在外層div新增事件 @click=\"closeSel\" html method closeSel(event){ var currentCli = document.getElementById(\"sellineName\");

vue點選實現多選

思路：新增一個新的空陣列arr（arr的裡元素的索引值表示，表示該索引值對應的li已經處於被選中狀態），如果arr陣列沒有點選的索引值，就新增到arr數組裡，如果有就把這個索引，就把這個索引從陣列中刪除。

vue點選Dashboard不同內容跳轉到同一表格的例項

1.點選跳轉寫法點選頁面內容：優先順序 <router-link :to=\'{ path: \"/cases/case\",query: { priorityId: 0,type:\"priorityId\"}}\' style=\"color: #515a6e;\">優先順序</router-link>

vue點選下載圖片

<template> <div> <a v-if=\"!isFirefox\" @click.stop.prevent=\"handleDownloadQrIMg\" class=\"qrcode\"

Vue點選當前路由實現重新整理功能

測試提了一個bug，就是當前頁面點選所在的側邊欄，頁面沒有重新整理 <div v-for=\"item in navAsideList\" :key=\"item.index\">

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

v-for和v-bind的結合

相關推薦