如何利用Vue.js庫設計無序列表

Vue.js是web交互的一種庫,有豐富的API文檔。無序列表是可以利用ul和li標籤實現,展示整齊的字符內容;無序列表默認展示的是以黑色的點,而有序列表是顯示數字。下面利用一個實例說明Vue.js庫設計無序列表的方法,操作如下:

工具/原料

Vue.js庫
HBuilder
截圖工具
瀏覽器
HTML5
CSS3
JavaScript

方法/步驟

第一步,在web項目中創建靜態頁面index.html,並設置title里的內容,如下圖所示:

第二步,引入Vue.js核心的js文件,有需要css文件也要引入,如下圖所示:

第三步,在body標籤元素內編輯div和ul--li,使用v-for進行遍歷循環,如下圖所示:

第四步,在script標籤內部編寫無序列表數據源,注意el中的id是帶有「#」,如下圖所示:

第五步,預覽靜態頁面,發現頁面展示{{cu.datas}},而不是無序列表,如下圖所示:

第六步,將js代碼部分移到div結束標籤下方,再次預覽頁面,這時顯示無序列表,如下圖所示:

注意事項

注意自定義Vue.js位置
注意v-for標籤的用法

相關文章

  1. 如何利用Vue.js庫中的v-for循環生產有序列表

    Vue.js庫中生成循環遍歷數據,利用v-for,類似JavaScript中的for循環.有序列表是有序號的列表,它含有的數據可以利用v-for指令循環出來.使用這兩者結合起來,可以快速地生成有序列表 ...
  2. 如何利用Vue.js庫中的v-on指令綁定按鈕點擊事件

    Vue.js庫中的v-on指令用於綁定事件監聽器,v-on指令後可以帶參數,還可以增加修飾符.按鈕點擊事件也是v-on指令來綁定,利用v-on:click.下面利用一個說明v-on指令的用法,操作如下 ...
  3. 如何利用Vue.js庫中的v-bind綁定樣式屬性

    Vue.js庫中的v-bind指令用於響應HTML元素的特性,可以是一個或多個屬性,也可以是一個動態的表達式.v-bind主要是綁定不同的樣式和屬性,如style.class和src等.下面利用一個實 ...
  4. 如何利用Vue.js庫實現自定義指定

    在Vue.js庫中,有時內置指令不能滿足需求,這時需要自定義指令來作為支持.自定義指令是一個將數據變化映射成元素變化.可以使用directives註冊自定義指令.下面利用一個實例說明自定義指令的用法, ...
  5. 如何利用Vue.js庫中的v-model綁定表單中的數據

    Vue.js跟AngularJS一樣,具有雙向綁定功能,而Vue.js實現雙向綁定功能的是v-model,v-model可以作用於表單元素上,自動獲取更新元素的數據.如果表單數據發生改變,其他的綁定數 ...
  6. 如何利用Vue.js庫中的v-show顯示和隱藏元素

    Vue.js庫中v-show指令是根據表達式的值來顯示或隱藏HTML元素,當v-show的值為true,表示元素顯示:如果v-show值為false,表示元素隱藏.下面利用一個實例說明v-show命令 ...
  7. 如何利用Vue.js庫綁定HTML標籤內的class屬性值

    在HTML文件內設置元素樣式可以利用class選擇器,如果出現多個class,可以寫成class="a b c".那麼,在Vue.js中該如何綁定HTML多個class?答案是用v ...
  8. 如何利用Vue.js庫實現表單校驗

    表單校驗是web開發中一個重要環節,當用戶輸入錯誤的字符或者未輸入字符(必填項),表單校驗可以給用戶一個提示,幫助用戶完善輸入內容.Vue.js庫也具有校驗功能,利用vue-validator插件實現 ...
  9. 如何利用Vue.js庫中的綁定內聯樣式v-bind:style

    一般HTML文件里元素設置樣式,利用的是style屬性,如style="font-size:12px;color:#FF0000;width:400px;height:500px;" ...
  10. 如何利用Vue.js庫中的v-text指令綁定數據源

    Vue.js庫中的v-text指令可以更新元素的內容,{{變量}}也可以綁定一個v-text指令.在給Vue.js變量設置一個值,然後利用v-text進行綁定.下面利用一個實例說明v-text指令的用 ...
  11. 如何利用Vue.js庫中的v-html指令添加html元素

    Vue.js庫中的v-html指令,可以更新元素的innerHMTL,按照普通HTML元素插入:可以利用{{變量}}綁定數據.下面利用一個實例說明v-html指令的用法,操作如下: 工具/原料 Vue ...
  12. 如何利用Vue.js庫中的v-if內部指令判斷元素顯示

    Vue.js庫中帶有一些內部指令,有v-if.v-show.v-else.v-on等.其中,v-if是根據表達式的值判斷一個元素是生成或移除,如果判斷為true,就生成元素:否則,移除元素.下面利用一 ...
  13. 如何利用Vue.js庫實現兩個數據進行加法運算

    Vue.js庫中具有計算屬性,根據輸入的值發生改變,其計算結果也發生改變.屬性值綁定需要用到v-model,這裡計算兩個數的和,當其中一個或兩個數據改變時,它們的和也隨之發生改變.下面利用一個實例使用 ...
  14. 如何利用Vue.js庫註冊組件並顯示在界面上

    組件是Vue.js的功能之一,可以減少代碼量.可重複使用.組件可以有全局設定和局部設定,全局設定就是在父模塊上定義,沒有下級:局部設定就是讓組件放在其他組件內.註冊組件就是註冊界面,有用戶名.密碼等信 ...
  15. 如何利用微信樣式庫設計按鈕

    微信作為現在非常流行的交流方式,對它研究的人也越來越多,對手機端的展示也越來越高了.微信公眾平台開發了自己的樣式庫,可以利用它設計更好.兼容性更好的頁面.那麼,下面講述下如何利用微信樣式設計按鈕,具體 ...
  16. 如何使用Vue.js動態生成有序列表並獲取數據

    之前看過Vue.js,但是由於項目中沒有使用,就慢慢忘記了.現在,回頭去看Vue.js,發現很多東西都生疏了,於是我重新撿起這個,溫習了下,做了一些簡單的實例.有這麼一個場景: (1)創建一個有序列表 ...
  17. 如何利用HTML5和CSS3實現方塊無序列表

    無序列表是網頁中常見的一種元素之一,利用<ul><li></li></ul>構成.無序列表前面默認會有一個小圓點,但是這個小圓點也可以設置為空心圓.實心 ...
  18. 如何利用ionic框架製作無序列表並設置樣式

    ionic框架中有種控制項列表,分為無序列表和有序列表,無序列表是用的ul元素,而有序列表用的是ol元素.有序和無序的差別是前面是否有數字,有序列表記錄前面有數字,而無序列表沒有. 下面利用一個具體實例 ...
  19. Vue.js實現列表清單的操作方法

    Vue.js在設計上採用MVVM模式,當View視圖層發生變化時,會自動更新到ViewModel.接下來通過本文給大家分享Vue.js實現列表清單的操作方法. 工具/原料 JavaScript 方法/ ...
  20. 如何利用Python設計語言列表調用API文檔的方法

    Python設計語言中的列表------list,自帶了很多方法,可以利用Python中的help命令來查看.help(list)可以查看到列表的方法.函數和屬性等,下面利用幾個實例說明list的方法 ...