元件化
頁面 動態效果 樣式
new vue(
})原樣輸出裡面的內容
>
>
>
>
>
package.json webpack.config.js
="isshow" style=
"height:100px;background-color:green;"
>
"isred? 'red':'green'"
>
1111
export default
}}.red
class結合v-bind使用
需要根據可變的表示式的就結果來給class賦值,就需要遇到v-bind:class=」***」
v-bind:屬性名=」表示式」
簡化的寫法: :屬性名=」表示式」
class:結果的分類
乙個樣式:返回字串,三元表示式和key和樣式的物件清單
多個樣式:返回物件(樣式做key,true或false的值)
class="isred? 'red':'green'">1111
class="">
export
default,]
}}}
複雜情況:通過遍歷,根據當前物件的成績,匹配成績和樣式的清單物件,用成績做key,取物件的value,最終返回字串做樣式名
v-for="stu in stus"
:class="[stu.score]">
}li>
ul>
vue2 0入門及實戰開發 四
過濾器 獲取dom元素 請輸入內容 text name v model text 顯示 export default filters 建立全域性過濾器 vue.filter myfilter function value 注意 當全域性過濾器和元件內過濾器重名的時候,是以元件內過濾器為有效的 獲取d...
Vue2 0 實戰專案 六 Vuex
最近進入了乙個新專案組,前端框架選擇vue進行開發,資料的狀態管理選擇用vuex。本篇隨筆中的 採用vuex官網提供的購物車案例。index.html main.js api shop.js 抽取出api請求 components cart.vue 購物車元件 productlist.vue 產品元...
搭建Vue2 0開發環境
1 必須要安裝nodejs 2 搭建vue的開發環境 安裝vue的腳手架工具 官方命令列工具 npm install global vue cli cnpm install global vue cli 此命令只需要執行一次 3 建立專案 必須cd到對應的乙個專案裡面 vue init webpac...