Vue ---- 表單指令 條件指令 循環指令 分隔符 過濾器 計算屬性 監聽屬性

目錄

• 案例講解：
• 一. 表單指令
  • 1.重點:
    • 補充
  • 2.單選框
  • 3.單一複選框
  • 4.多複選框
• 二 . 條件指令
  • v-if/v-show ...
  • v-clock
• 三 . 循環指令
  • string
  • arrag
  • obj
  • 循環指令案例(splice):
• 四 . localstorage and sessionstorage
• 五.分隔符(瞭解)
• 六.過濾器
  • 1.在filters成員中定義過濾器方法
  • 2.能夠對多個值進行過濾，過濾時還能夠額外傳入輔助參數
  • 3.過濾的結果能夠進行下一次過濾(過濾的串聯)
• 7.計算屬性
• 8.監聽屬性

案例講解：

# 有一個200x200矩形框wrap，點擊wrap自己，記錄點擊次數，若是是1次wrap爲pink色，2次wrap爲green色，3次wrap爲cyan色，4次從新回到pink色，依次類推

<div class="wrap" @click="actionFn" :style="{backgroundColor: bgColor}">{{ count }}</div>

methods: {
            actionFn() {
                this.count ++;
                this.bgColor = this.colorArr[this.count % 3]
                // 0 % 3 餘 0
                // 1 % 3 餘 1 ....
            }
        }

一. 表單指令

1.重點:

<!--v-model='變量' 能夠完成雙向綁定-->
<!--變量值與表單標籤的value相關-->
<input type="text" name="user" placeholder="輸入帳號" v-model="v1">
<input type="text" name="password" placeholder="輸入密碼" v-model="v1">
<!--v-model綁定的變量值能夠影響到表單標籤的值 反過來表單標籤的值也能夠影響變量的值-->

補充

<!--數字之間的加減 例如字符串和num 能夠在字符串前加上+便可轉換成num-->

2.單選框

男：<input type="radio" name="sex" value="male" v-model="v2">
女：<input type="radio" name="sex" value="female" v-model="v2">
{{ v2 }} <!--v2的值是單選框的value-->

3.單一複選框

是否贊成：贊成 <input type="checkbox" name="agree" v-model="v3">
{{ v3 }}  <!--v3拿到的是布爾值 -->

4.多複選框

愛好：<br>
男：<input type="checkbox" name="hobbies" value="male" v-model="v4">
女：<input type="checkbox" name="hobbies" value="female" v-model="v4">
哇塞：<input type="checkbox" name="hobbies" value="other" v-model="v4">
{{ v4 }} <!--拿到的是一個數組 [ "male", "female" ] -->

<!--可是你必須給個數組-->

data: {
            v1: '123', // v-model
            v2: 'male', // 單選框
            v3: false, // 單一複選框
            v4: ['male', 'female'] // 複選框
        }

二 . 條件指令

v-if/v-show ...

v-show='布爾值' v-if='布爾值'

v-if | v-else-if | v-else

v-show 和 v-if之間的區別:

// v-show='布爾值'  隱藏時:採用display:none進行渲染
// v-if='布爾值'    隱藏時:不在頁面中渲染(保證不渲染的數據泄露)

<div class="box r" v-if="page === 'r_page'"></div>
<div class="box b" v-else-if="page === 'b_page'"></div>
<div class="box g" v-else></div>
<!--不成立就不會渲染!!-->

v-clock

# 當網絡較慢，網頁還在加載 Vue.js ，而致使 Vue 來不及渲染，這時頁面就會顯示出 Vue 源代碼。咱們可使用 v-cloak 指令來解決這一問題。

js不變，在 div中加入 v-cloak 指令

<div id="app" v-cloak>
    {{context}}
</div>

[v-cloak]{
    display: none;
}

三 . 循環指令

<!--循環指令：v-for="ele in string|array|obj"  -->

string

<i v-for="c in string">{{ c }} </i>    <!--string 如今爲字符串 咱們能夠直接拿到 {{ c }}-->

<i v-for="(c, i) in string">{{i}}:{{c}</i> <!--c 爲值 i 爲索引-->

arrag

<div v-for="e in arrag">{{ e }}</div>

<div v-for="(e, i) in arrag">{{ i }}:{{ e }}</div> <!--e 爲值 i 爲索引-->

obj

<div v-for="v in obj">{{ v }}</div>  <!--v 爲值-->

<div v-for="(v, k, i) in people">{{ i }} - {{ k }}:{{ v }}</div> 
 <!--v 爲值-->   <!--k 爲鍵-->   <!--i 爲索引-->

循環指令案例(splice):

<input type="text" v-model="comment">
<button type="button" @click="send_msg">留言</button>
<ul>
    <li v-for="(msg, i) in msgs" @click="delete_msg(i)">{{ msg }}</li>
</ul>

data: {
    comment: '',
    msgs: localStorage.msgs ? JSON.parse(localStorage.msgs) : [],

},
methods: {
    send_msg() {
        // 將comment添加到msgs數組中：unshift push 首尾增 | shift pop 首尾刪
        // this.msgs.push(this.comment);

        // 數組操做最全方法：splice(begin_index, count, ...args)
        // 從第0位開始 操做2位 操做內容爲 args
        // this.msgs.splice(0, 2);

        if (!this.comment) {
            alert('請輸入內容');
            return false;
        }
        this.msgs.push(this.comment);
        this.comment = '';

        localStorage.msgs = JSON.stringify(this.msgs);
    },
    delete_msg(index) {
        this.msgs.splice(index, 1);
        localStorage.msgs = JSON.stringify(this.msgs);
    }
}

四 . localstorage and sessionstorage

// 前臺數據庫
    // localStorage: 永久存儲
    // sessionStorage：臨時存儲(所屬頁面標籤被關閉後，清空)

    // 存
    // localStorage.n1 = 10;
    // sessionStorage.n2 = 20;

    // 取
    // localStorage.n1
    // sessionStorage.n2

    // 數組等類型須要先序列化成JSON
    // localStorage.arr = JSON.stringify([1, 2, 3]);
    // JSON.parse(localStorage.arr)

    // 清空數據庫
    // localStorage.clear();

五.分隔符(瞭解)

delimiters: ['[{', '}]'],  // 修改插值表達式符號

<div id="app">
        {{ msg }}
        [{ msg }]  <!--修改事後的-->
    </div>

六.過濾器

1.在filters成員中定義過濾器方法

<p>{{ num | f1 }}</p>

filters:{
    // 傳入全部要過濾的條件，返回值就是過濾的結果
    f1 (num) {
        return num * 10;
    },
}

2.能夠對多個值進行過濾，過濾時還能夠額外傳入輔助參數

<p>{{num , num2 | f2 }}</p>

filters:{
    // 傳入全部要過濾的條件，返回值就是過濾的結果
    f2(num, num2){ // 接受兩個參數
        return num * num2
    },
}

3.過濾的結果能夠進行下一次過濾(過濾的串聯)

<p>{{ num , num2 | f2 | f3 }}</p>

filters:{
    f3(num){
        return num * 3
    },
}

7.計算屬性

一、computed計算屬性能夠聲明 方法屬性（方法屬性必定不能在data中重複聲明）

二、方法屬性 必須在頁面中渲染，纔會啓用綁定的方法，方法屬性的值就是綁定方法的返回值

三、綁定的方法中出現的全部變量都會被監聽，任何一個變化發生值更新都會從新出發綁定方法，從而更新方法屬性的值

案例:

<input type="text" value="" v-model="v1">
<input type="text" value="" v-model="v2">
<p>{{ result }}</p>

computed:{
    result(){
        this.v1;
        this.v2;
        return +this.v1 + +this.v2;
    }
}

通常用來解決的問題：一個變量值依賴於多個變量

8.監聽屬性

一、監聽的屬性須要在data中聲明，監聽方法不須要返回值

二、監聽的方法名就是監聽的屬性名，該屬性值發生更新時就會回調監聽方法

三、監聽方法有兩個回調參數：當前值，上一次值

案例:

<p>姓名：<input type="text" v-model="full_name"></p>
<p>姓：{{ first_name }}</p>
<p>名：{{ last_name }}</p>

data:{s
    full_name:'',
    first_name:'',
    last_name:''
},
watch:{
    full_name(n,i){
        console.log(n, i);
        name_arr = n.split('');
        this.first_name = name_arr[0];
        this.last_name = name_arr[1];
    }
}

解決的問題：多個變量值依賴於一個變量值