VUE學習日記（四） ---- v-on

阿新 • • 發佈：2020-08-22

v-on為頁面元素繫結各種種事件（keydown，keyup，click，dbclick，load，etd）

v-on:click 簡易寫法 @click

<body>
    <div id="myPage">
      <p>你最喜歡的遊戲是：{{gamename}}</p>
      <button v-on:click="showmylikename('英雄聯盟')">英雄聯盟</button>
      <button v-on:click="showmylikename('DNF')">DNF</button>
      <button v-on:click=" 
showmylikename('水滸Q傳')">水滸Q傳</button>
      <button @click="showmylikename('元氣騎士')">元氣騎士</button>
    </div>    

    <script>
      var myPage = new Vue({
        el:'#myPage',
        data:{
          gamename:'地下城與勇士'
        },
        methods:{
          showmylikename:function(pgamename)
          {
             
this.gamename=pgamename;
          }
        }
      })
    </script>

  </body>

效果圖：

點選任意按鈕：

VUE學習日記（四） ---- v-on

v-on為頁面元素繫結各種種事件（keydown，keyup，click，dbclick，load，etd） v-on:click 簡易寫法 @click

VUE學習日記（十三） ---- 資料繫結v-model（表單：下拉框）

下拉多選加multiple <div id=\"myPage\"> <h2>下拉單選--你喜歡的遊戲是：</h2>

Vue學習筆記（四）JavaScript補充知識點和v-model的使用

目錄一、JavaScript補充知識點1. ES6補充知識塊級作用域物件字面量增強寫法2. JS高階函式filter函式map函式reduce函式鏈式操作3. 箭頭函式基本語法單個引數時的省略函式體為單行時的省略二、v-model的使用1. 簡單使

VUE學習日記（八） ---- class物件繫結

style.css body{ font-size:24px; } .active{ color:red; } .big{ font-size:64px; } <!DOCTYPE html> <html>

Kubernetes學習日記（四）

Kubernetes學習日記（四）暑期加入了沃天宇老師的實驗室進行暑期的實習。在正式開始工作之前，師兄先讓我瞭解一下技術棧，需要了解的有docker、k8s、springboot、springcloud。

vue學習筆記（四）--來源尚矽谷《收集表單資料、過濾器、內建指令、自定義指令、生命週期、非單檔案元件、單檔案元件》

十三、收集表單資料收集表單資料：若：<input type=\"text\"/>，則v-model收集的是value值，使用者輸入的就是value值。

VUE學習日記（十六） ---- 錶行元件

<div id=\"myPage\"> <h2>遊戲列表</h2> <table border=\"1\"> <tr> <td>編號</td>

VUE學習日記（十八） ---- 傳遞資料

<div id=\"myPage\"> <h1>您的成績評價</h1> <test-result :score=\"50\"></test-result>

VUE學習日記（二十） ---- 引數驗證

<div id=\"myPage\">  <h2>人員資訊</h2>

vue學習筆記（二）動態繫結屬性v-bind

技術標籤：vuevuejavascript 一、基礎除了內容需要動態來決定外，某些屬性我們也希望動態來繫結。，比如動態繫結a元素的href屬性，比如動態繫結img元素的src屬性，比如圖片的連結src、網站的連結href、動態繫結

Vue（6）v-on指令的使用

v-on 監聽事件可以用 v-on 指令監聽 DOM 事件，並在觸發時執行一些 JavaScript 程式碼。事件程式碼可以直接放到v-on後面，也可以寫成一個函式。示例程式碼如下：

深入學習Redis（四），基本型別【List】剖析

更多精彩文章，關注【ToBeTopJavaer】，更有數萬元精品vip資源免費等你來拿！！！

Maven專案學習筆記（四）SSM專案利用《form:form》標籤在Mysql資料庫中實現新增和修改資料

近期自己搞好了系統的新增、修改、條件查詢的功能了，折騰了幾天，主要是新增修改的業務判斷比較多，導致那個負責修改的控制器程式碼加註釋都170多行，真第一次遇見這種情況。最後還是能實現對應的功能了

C# 學習日記（二）

語法：Const 型別變數名=常量值在定義時賦值，其他地方不允許賦值列舉讓我們定義一種型別並且在定義這種型別時我們要制定這個型別的所有值

微信小程式學習總結（四）事件與冒泡例項分析

本文例項講述了微信小程式學習總結（四）事件與冒泡。分享給大家供大家參考，具體如下：

python學習筆記（四）

if巢狀格式和案例 \'\'\'num=60#定義變數num為60 if num >=30: #如果num大於等於30 print(\"num>=30\")#則輸出num>=30，往下接著執行

JVM 學習筆記（四）

回顧：　　在之前的文章中，我們主要體現了當堆記憶體設定的比較小的情況下，比如：-Xmx20M -Xms20M，在專案執行的過程中，不斷往記憶體中去新增物件，

Vue學習筆記（二）

1 條件判斷 1.1 普通if 條件判斷使用v-if指令： <div id="app"> <p v-if="seen">看到了</p>;

設計模式學習筆記（四）：簡單工廠模式

1 定義簡單工廠模式（Simple Factory Pattern）：定義一個工廠類，它可以根據引數的不同返回不同類的例項，被建立的例項通常都具有共同的父類。

OpenWAF學習筆記（四）—— API-接入規則

openwaf_api是openwaf 的子模組，用於控制讀取/修改記憶體中的部分資訊，首先對接入規則這部分進行學習。