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

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

技術標籤：VUE vue.js

學習VUE記錄一些自己在VUE上面的點滴

下面展示一些 內聯程式碼片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VUE點選列表改變樣式</title> 

</head>
<script src="js/vue.js"></script>
<!-- 引入vue.js檔案 -->
<style>
.form{
     color:red
}
/* //設定 class名為form的樣式 */
</style>
<body>
    <div id="app">   
    <!-- //先建立一個id為app的div. -->
    <ul>
    	<li :class="{form : isform == index}" 
 v-for = "(m,index) in mest"  @click="click(index)">{{index}}--------{{m}} </li>
        <!-- //繫結一個名為click的點選事件 -->
        <!-- v-for遍歷的時候， 如果是物件的話，需要索引則需要3個變數。例如： v-for="(m,m2,index) in mest" -->
    </ul>
</div>
</body>
<script> 

var app = new Vue({
//new的Vue第一個字母要大寫
      el:"#app",
      data:{
      		mest:["1","2","3"],
      		//mest這個資料可以是資料或者物件。物件的格式：mest:{pos1:"post1",pos2:"psot2",pos3:"psot3"}
      		isform:false
      },
      methods:{
		click:function(index){
		  this.isform = index
		}
}
})
</script>
</html>

有什麼寫錯的地方請在留言上給我指正，不勝感激。

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

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

vue基礎（學習官方文件）

基礎介紹是什麼是一套用於構建使用者介面的漸進式框架宣告式渲染 1 2 3 4 5 6 7 8 9 <div id=\"app\">{{ message }}</div>

typeScript（學習一，陣列）

前言：TypeScript是微軟開發的一門程式語言，它是JavaScript的一個超集,它遵循最新的ES6指令碼語言規

linux之平均負載（學習筆記非原創）

什麼是平均負載 [root@111 ~]# uptime 11:03:33 up 149 days, 17:34,1 user,load average: 0.08, 0.05, 0.01

Java發展史、JDK環境配置、執行原理及開發工具（學習的前期準備）

一、Java的歷史和三大版本 1、Java的發展史 Java由sun公司開發，Java之父James Gosling，Java是一門面向物件的程式語言，也稱為“高階程式語言”

簡單的shiro應用（學習狂神說）

一、上程式碼 controller package com.wxl.controller; @Controller public class IndexController { @RequestMapping({\"/\",\"index\"})

vue專案（快取頁面）保持頁面狀態，點選tag切換後，還能回到之前操作的樣子

保持頁面操作中狀態，在點選tag切換的時候，還能回到之前的樣子。拿收集整編頁面為例。

v-bind v-on 縮寫

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

canvas中裁切（橡皮檫）的應用--探照燈，點選去除遮罩

canvas中裁切（橡皮檫）的應用--探照燈，點選去除遮罩 1. 點選去除遮罩，顯露出下面的圖片

vue v-for 點選當前行,獲取當前行資料及event當前事件物件的操作

前言在 v-for 迴圈語句上，定義一個點選事件傳入兩個引數（當行資料、當前事件物件），如下程式碼片段，當前事件物件必須加上 ‘$\' 符號

如何簡單美化自己的部落格（二）——主介面樣式及點選特效

部落格主體樣式更改首先選一個框架模板，在此模板基礎上進行樣式調整。這裡我選擇darkgreentrip

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

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

vue選項卡，v-for迴圈資料列表，初始迴圈中的第一個為選中狀態class，點選改變class

css： .recharge_box{display: flex;padding: 0.1rem 0.1rem;justify-content: space-between;} .recharge{width: 2rem;height: 1rem;text-align: center;line-height: 1rem; border: 1px solid #eee;border-radiu