用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 ...