Vue 分別原生JS和Vue實現計數器功能

2021-10-10 07:44:21 字數 1175 閱讀 4539

用vue實現計數器功能,其中vue實現的**黑馬程式設計師vue教程給出,這裡對其css**進行了注釋,並且用原生js重新實現了一次。

不能大於10

不能小於0

實現步驟

data中定義資料(num,min,max)

methods新增兩個方法sub(-)和add(+)

使用v-text將num設定給span標籤

使用v-on分別將sub和add繫結給-和+

設定num的範圍,即min = 0,max=10

計數器title

>

rel=

"stylesheet"

href

="./css/index.css"

>

head

>

>

>

class

="input-num"

>

@click

="sub"

>

-button

>

>

}span

>

}會佔寬度-->

@click

="add"

>

+button

>

div>

src=

""alt="

" />

div>

body

>

html

>

分別用Js和vue實現跑馬燈效果

跑馬燈就是這條資訊串首尾相連,向乙個方向迴圈滾動。實現邏輯 根據id值獲取標籤 獲取標籤的文字內容 擷取文字內容的第乙個字 擷取文字內容第乙個字後面的所有內容 把第 步擷取的第乙個字拼接到第 步擷取的文字內容後面 將第 步拼接後的字串寫入到第 步的標籤中 實現 btn wrap btn start ...

Vue中使用原生js拖動

本文參考了 基於vue實現拖拽效果 最終實現,按原文中 實現,發現有bug,在滑鼠按下,拖動時,難以正常拖動。貼出原文 directives document.onmouseup e 原文 是有問題的,在滑鼠按下,拖動時,難以正常拖動,並且提前觸發了mouseup事件,導致mousemove並未解綁...

使用原生實現簡單的vue

html 更新操作 js let vm new vue computed methods 觀察者 發布訂閱 觀察者 被觀察者 class dep 訂閱 addsub watcher 發布 notify class watcher get update vm.watch vm,school.name ...