在寫網頁前端設計時，我們通常會選擇用CSS來定義class或style，而在Vue.js裡我們可以使用v-bind來控制每個標籤的class和style對應的內容與時機。
假設我們要設定在user輸入超過15個字元時讓輸入框文字變紅來提醒，我們可以先在css定義好一個class"over15"像這樣:

    .over15 {
        border: red solid 1px;
        color: red;
    }

然後再建立儲存message的Vue實體與input狀態綁定，然後我們再使用v-bind:class(v-bind可以省略)，來設定我們要的在輸入超過15個字元時自動啟用".over15"這個CSS樣式，程式會像這樣:

    <div id="css">
        <input
        type="text"
        v-model.trim="message"
        :class="{ 'over15': message.length > 15 }"
        placeholder="please enter under 10 words">
    </div>

        const css =Vue.createApp({
            data (){
                return{
                    message:''
                }
            }
        }).mount('#css');

當然CSS除了通過class也可以從style直接設定，我們從同一個程式改寫，將v-bind:class改為:style，再到vue實體裡面建立一個computed方法來計算input字元數量，在設定當它超過15個字元時的樣式，我們改完的程式會是這樣的:

    <div id="css">
        <input
        type="text"
        v-model.trim="message"
        :style="mesStyle"
        placeholder="please enter under 10 words">
    </div>

        const css = Vue.createApp({
            data () {
                return {
                    message: ''
                }
            },
            computed: {
                ufifteen: function() {
                    return this.message.length <= 15;
                },
                mesStyle: function() {
                    return {
                        'border': this.ufifteen ? '' : 'red solid 1px',
                        'color': this.ufifteen ? '' : 'red'
                    };
                }
            }
        }).mount('#css');

然後上面這兩種方法的網頁呈現效果會是相同的:

v-model.trim

這個是我之前覺得可能不會用到所以沒有對它進行介紹的一個Vue.js指令，沒想到今天就先用到它，v-model.trim和前面提到過的.lazy、.number一樣是v-model的修飾子，它是可以自動將輸入框的空白字元過濾掉的指令，在我們想要計算輸入框的字元數量，或需要去除user不必要的空白字元時可以很方便達到目的。

今天將進度放在定義前端樣式的CSS與Vue.js的連結上，明天我將進入作為一個互動式網頁的精隨與靈魂--事件處理，更深入地來學習Vue.js與網頁事件的管理與操作重點將放在v-on這個事件綁定指令上，謝謝閱讀。