[筆記] Vue 自訂綁定 style 標籤 @地瓜大的飛翔旅程

章節連結

語法
其他 Vue.js 相關文章

Vue 中的 v-bind 有一些預設的 style 選項如 :disabled。不過若要客製化的 style 顯示，像是 visibility:hidden 之類的，則可用 :style ={your-customized-style} 來搞定。

語法

// 若以綁定 visibility:hidden 選項，並依照一定條件才顯示
<span 
  :style="{visibility: passwordHint ? 'visible' : 'hidden'}"
>The password length should be greater than 8.</span>

// 宣告變數，並用 watch 來監看 v-model = password
<script>
export default {
  data(){
    return{
      password:'',
      passwordHint:false
  },
  watch:{
    password: function(){
      this.password.length <8 ? this.passwordHint = true : this.passwordHint = false
    }
  }
}
</script>

// 若以綁定 visibility:hidden 選項，並依照一定條件才顯示

<span

:style="{visibility: passwordHint ? 'visible' : 'hidden'}"

>The password length should be greater than 8.</span>

// 宣告變數，並用 watch 來監看 v-model = password

export default {

data(){

return{

password:'',

passwordHint:false

watch:{

password: function(){

this.password.length <8 ? this.passwordHint = true : this.passwordHint = false

}

</script>

其他 Vue.js 相關文章

★全文分享★ [筆記] Vue 按鈕 / 篩選資料架構

這是一篇在 Vue 上實作按鈕 / 篩選器的資料架構筆記。說明按鈕設計方式將一個個

★全文分享★ [指南] Vue.js 搭配 Docker 進行佈署

Docker 是個運用了虛擬化技術的套件，讓不同電腦上可以正常執行同樣的電腦程式。

★全文分享★ [筆記] Vue-Carousel 輕量化輪撥套件介紹

說到 Carousel 輪撥系列的套件，Swiper 可以說是滿知名的一個，也有整合版的 Vue Awesom

★全文分享★ [筆記] 在 Vue 中正確引用 src/assets 裡的圖片

在 Vue 專案內放於 src/assets 裡面的圖片檔案，會在打包 npm run build 的時候一起被整合

★全文分享★ [筆記] 將 Vue 專案自動佈署到 Github Pages 上

每次完成了一個 Vue 專案，要佈署到 Github 上，往往要手動執行 npm run build 之類的指

★全文分享★ [筆記] Vue 如何監控視窗寬度，並讓每個 component 可以取用

Vue 的專案裡，若要監測使用者的視窗大小寬度，最簡便的方法就是在預設的根目錄

★全文分享★ [指南] 在 Vue 專案中，修改樣式方法

樣式方法” title=”[指南] 在 Vue 專案中，修改樣式方法”>

在 Vue 專案中，若要修改對於 <body> 上的樣式，會遇上一個問題：因為 vue 的框

★全文分享★ [筆記] 從 Vue CLI 3 開始建立規模化專案

用 Vue CLI 3，可以快速的建立一個 Vue 專案。雖說是方便，但要能夠規模化的管理 vuex

★全文分享★ [筆記] 運用 Moment.js 製作 AM / PM 時間外掛

運用 Vue 和 Moment.js 來將 input-time 的 12 小時制時間，轉換成 24 小時制傳送到後端。

★全文分享★ [筆記] CodeSandbox 線上編輯器模擬前端框架

隨著前端框架的發展，當需要多人編輯、展示或是教學時，CodeSandbox 提供了一個很

★全文分享★ [筆記] 工字型樣板，長方形依照比例縮放

這回要挑戰工字型( I-Shape )的顯示樣板。同時，上頭要疊加有個會隨著數值比例而放

★全文分享★ [筆記] Element-UI 的自定義表格邊框樣式

Element UI 的表格算是非常常用的模組化套件之一，不過其表格邊框樣試算是非常難以

★全文分享★ [筆記] Vue 關於 slot-scope 的簡易認知

Vue 的 slot 系列使用方法，頭一回在 Element-UI 這個模組上看見，覺得用法挺神奇的，

★全文分享★ [筆記] Vue Watch 監聽並延後發送請求

當使用 Vue Watch 的事件監聽時，若有要觸發傳送 XML 之類的事件時，屢屢發送的話會

★全文分享★ [筆記] Element UI Table 表格表頭縱向顯示

這回在從事公司專案時，遇上了一個稍嫌難解的問題。在 Element UI Table 表格選項內

★全文分享★ [筆記] Vue SCSS 使用 Deep Selectors

在 Vue Sass 的使用方法上，若你有和其他的 Vue 套件一同使用，常會發生 css 選取困難

★全文分享★ [筆記] Vue 使用 SCSS

運用 Vue-cli 建立的專案，若要使用 SCSS 來較為語意化的管理自己的 css 檔，需要事先

★全文分享★ [筆記] 自定義 Element UI 標題欄位遇上 Vue/no-unused error 的解決方法

在 Vue template 的檔案，有時會需要運用到 slot-scope=”something” 的語法，但實質上並沒有

★全文分享★ [筆記] Vue 生命週期

每一個 Vue Instance 在創建時，都會經歷過一個完整的生命週期，這算是 Vue 的初始化

★全文分享★ [筆記] Vue 單元測試初探

隨著程式開發越來越龐大，那麼以「程式」測試「程式」是一件值得學習的投資了

★全文分享★ [筆記] Vue2 Perfect-Scrollbar 置底開始

Vue 的 Perfect-Scrollbar 套件，是 Vue 中滿常使用的捲軸選單的套件。雖說有內建的一些

★全文分享★ [筆記] Vue 的狀態管理 Vuex 實作心得

Vuex 是 Vue 中用於狀態管理的工具，你可以將每個頁面、元件都會用到的「狀態」(像

★全文分享★ [筆記] Body-Parser 無法解析的 FormData 解決方案 – multer

運用 express 的框架來架設後端的 Node.js 伺服器時，當遇上前端傳來的表單資料為 mult

★全文分享★ [筆記] Vue 頁面元件定時自動跳轉

當 Vue 頁面需要定時自動跳轉的功能時，只需在該頁面的 <script> 標籤內撰寫一

★全文分享★ [筆記] Vue 刷新當前頁面

Vue 的使用上，若是要進行完某個操作後重新刷新「當前頁面」的話，用單純的 redire

★全文分享★ [全端開發] 打造一個公開聊天室 Vue.js+MySQL+Socket.io+passport-jwt

這回實際演練來打造一個即時聊天室來練功，使用者可以分為管理員和一般資格。

★全文分享★ [筆記] BootstrapVue Pagination Vue 分頁套件使用

在網路世界中常用的前端 css 套件 – Bootstrap，搭配上前端框架 Vue，有好心人已經統

★全文分享★ [筆記] Vue 避免 ESLint 的 Unexpected Console Statement

當運用官方套件迅速建立一個 Vue 專案後，若你是採用 ESLint 的規則，那麼在除蟲時

★全文分享★ [筆記] Vue-cli 輸出 console.log 的結果

使用 Vue-cli 輸出頁面結果到網頁上時，若是需要輸出錯誤結果的瀏覽器的 console.log

★全文分享★ [筆記] Vue.js 前端分頁、搜尋表格內容 – 運用 props, data, computed, methods, watch

運用 Vue.js 前端框架，將發送到後端 API 請求的回傳 json 檔案，在頁面上做出分頁、

★全文分享★ [筆記] 解決 Vue-cli 打包後，無法顯示 Favicon 的問題

Vue-cli 運用 npm run build 將專案打包成靜態檔案給後端伺服器存取後，常會遇到 Favicon

★全文分享★ [筆記] 全端開發本機端資料互通 Vue.config.js 設定

在本機端執行前後端(全端)共同開發時，由於前後端都會各自啟用自己的伺服器，那

★全文分享★ [筆記] 解決 Vue 專案的 localhost:8080/sockjs-node 的無效請求

這篇是解決不時在測試 Vue 專案上時，常會在瀏覽器的 console 內看見的無效 GET 請求

★全文分享★ [筆記] Vue.js & Node.js 專案初始化筆記

這篇主要是筆記下如何快速的在本機端生成一個 Vue.js 的專案，並結合 Bootstrap 和 Nod

按讚加入粉絲團

語法