<center id="qkqgy"><optgroup id="qkqgy"></optgroup></center>
  • <menu id="qkqgy"></menu>
    <nav id="qkqgy"></nav>
    <xmp id="qkqgy"><nav id="qkqgy"></nav>
  • <xmp id="qkqgy"><menu id="qkqgy"></menu>
    <menu id="qkqgy"><menu id="qkqgy"></menu></menu>
    <tt id="qkqgy"><tt id="qkqgy"></tt></tt>

  • 1.1 computed

    一個數據, 依賴另外一些數據計算而來的結果

    語法:
    computed: { ? ? "計算屬性名" () { ? ? ? ?return "值" ? }}
    需求: 求2個數的和顯示到頁面上
    <template> ?<div> ? ?<p>{{ num }}</p> ?</div> </template> ? <script> export
    default { ?data(){ ? ?return { ? ? ?a: 10, ? ? ?b: 20 ? } }, ?// 計算屬性: ?// 場景:
    一個變量的值, 需要用另外變量計算而得來 ?/* ? 語法: ? computed: { ? ? 計算屬性名 () { ? ? ? return 值 ? ?
    } ? } */ // 注意: 計算屬性和data屬性都是變量-不能重名 // 注意2: 函數內變量變化, 會自動重新計算結果返回 ?computed: {
    ? ?num(){ ? ? ?return this.a + this.b ? } } } </script> ? <style> ? </style>
    計算屬性也是vue數據變量, 所以不要和data里重名, 用法和data相同

    1.2 緩存

    計算屬性是基于它們的依賴項的值結果進行緩存的,只要依賴的變量不變, 都直接從緩存取結果

    <template> ?<div> ? ?<p>{{ reverseMessage }}</p> ? ?<p>{{ reverseMessage
    }}</p> ? ?<p>{{ reverseMessage }}</p> ? ?<p>{{ getMessage() }}</p> ? ?<p>{{
    getMessage() }}</p> ? ?<p>{{ getMessage() }}</p> ?</div> </template> ? <script>
    export default { ?data(){ ? ?return { ? ? ?msg: "Hello, Vue" ? } }, ?// 計算屬性優勢:
    ?// 帶緩存 ?// 計算屬性對應函數執行后, 會把return值緩存起來 ?// 依賴項不變, 多次調用都是從緩存取值 ?// 依賴項值-變化,
    函數會"自動"重新執行-并緩存新的值 ?computed: { ? ?reverseMessage(){ ? ?
    ?console.log("計算屬性執行了"); ? ? ?return this.msg.split("").reverse().join("") ? }
    }, ?methods: { ? ?getMessage(){ ? ? ?console.log("函數執行了"); ? ? ?return
    this.msg.split("").reverse().join("") ? } } } </script> ? <style> ? </style>
    計算屬性根據依賴變量結果緩存, 依賴變化重新計算結果存入緩存, 比普通方法性能更高

    1.3?vue計算屬性-完整寫法

    計算屬性也是變量, 如果想要直接賦值, 需要使用完整寫法

    語法:
    computed: { ? ?"屬性名": { ? ? ? ?set(值){ ? ? ? ? ? ? ? ? ? }, ? ? ? ?get() { ? ?
    ? ? ? ?return "值" ? ? ? } ? } }
    需求: 計算屬性給v-model使用

    頁面準備輸入框
    <template> ?<div> ? ? ?<div> ? ? ? ? ?<span>姓名:</span> ? ? ? ? ?<input
    type="text" v-model="full"> ? ? ?</div> ?</div> </template> ? <script> // 問題:
    給計算屬性賦值 - 需要setter // 解決: /* ? 完整語法: ? computed: { ? ? ? "計算屬性名" (){}, ? ? ?
    "計算屬性名": { ? ? ? ? ? set(值){ ? ? ? ? ? ? }, ? ? ? ? ? get(){ ? ? ? ? ? ? ?
    return 值 ? ? ? ? ? } ? ? ? } ? } */ export default { ? ?computed: { ? ? ?
    ?full: { ? ? ? ? ? ?// 給full賦值觸發set方法 ? ? ? ? ? ?set(val){ ? ? ? ? ? ? ?
    ?console.log(val) ? ? ? ? ? }, ? ? ? ? ? ?// 使用full的值觸發get方法 ? ? ? ? ? ?get(){
    ? ? ? ? ? ? ? ?return "無名氏" ? ? ? ? ? } ? ? ? } ? } } </script> ? <style> ?
    </style>
    想要給計算屬性賦值, 需要使用 set 方法

    1.4 案例-小選影響全選

    ?小選框都選中(手選), 全選自動選中

    分析:

    ① 先靜態后動態, 從.md拿到靜態標簽和數據

    ② 循環生成復選框和文字, 對象的c屬性和小選框的選中狀態, 用v-model雙向綁定

    ③ 定義isAll計算屬性, 值通過小選框們統計c屬性狀態得來
    <template> ?<div> ? ?<span>全選:</span> ? ?<!-- 4. v-model 關聯全選 - 選中狀態 --> ?
    ?<input type="checkbox" v-model="isAll"/> ? ?<button>反選</button> ? ?<ul> ? ?
    ?<li v-for="(obj, index) in arr" :key="index"> ? ? ? ?<!-- 3. 對象.c - 關聯 選中狀態
    --> ? ? ? ?<input type="checkbox" v-model="obj.c"/> ? ? ? ?<span>{{ obj.name
    }}</span> ? ? ?</li> ? ?</ul> ?</div> </template> ? <script> // 目標: 小選框 -> 全選
    // 1. 標簽+樣式+js準備好 // 2. 把數據循環展示到頁面上 export default { ?data() { ? ?return { ? ?
    ?arr: [ ? ? ? { ? ? ? ? ?name: "豬八戒", ? ? ? ? ?c: false, ? ? ? }, ? ? ? { ? ? ?
    ? ?name: "孫悟空", ? ? ? ? ?c: false, ? ? ? }, ? ? ? { ? ? ? ? ?name: "唐僧", ? ? ?
    ? ?c: false, ? ? ? }, ? ? ? { ? ? ? ? ?name: "白龍馬", ? ? ? ? ?c: false, ? ? ? },
    ? ? ], ? }; }, ?// 5. 計算屬性-isAll ?computed: { ? ?isAll () { ? ? ? ? // 6.
    統計小選框狀態 -> 全選狀態 ? ? ? ?// every口訣: 查找數組里"不符合"條件, 直接原地返回false ? ? ? ?return
    this.arr.every(obj => obj.c === true) ? } } }; </script>
    1.5?案例-全選影響小選

    全選影響小選

    *
    需求1: 獲取到全選狀態 – 改裝isAll計算屬性

    *
    需求2: 全選狀態同步給所有小選框

    分析:

    ①: isAll改成完整寫法, set里獲取到全選框, 勾選的狀態值

    ②: 遍歷數據數組, 賦給所有小選框v-model關聯的屬性
    <script> export default { ?// ...其他代碼 ?// 5. 計算屬性-isAll ?computed: { ? ?isAll:
    { ? ? ?set(val){ ? ? ? ?// 7. 全選框 - 選中狀態(true/false) ? ? ?
    ?this.arr.forEach(obj => obj.c = val) ? ? }, ? ? ?get(){ ? ? ? ?// 6. 統計小選框狀態
    -> 全選狀態 ? ? ? ?// every口訣: 查找數組里"不符合"條件, 直接原地返回false ? ? ? ?return
    this.arr.every(obj => obj.c === true) ? ? } ? } } }; </script>
    1.6?案例-反選

    需求: 點擊反選, 讓所有小選框, 各自取相反勾選狀態

    分析:

    ①: 小選框的勾選狀態, 在對象的c屬性

    ②: 遍歷所有對象, 把對象的c屬性取相反值賦予回去即可
    <button @click="btn">反選</button> ? <script> export default { ?// ...其他代碼省略
    ?methods: { ? ?btn(){ ? ? ?// 8. 讓數組里對象的c屬性取反再賦予回去 ? ? ?this.arr.forEach(obj =>
    obj.c = !obj.c) ? } } }; </script>
    2. vue偵聽器

    2.1 watch

    可以偵聽 data/computed 屬性值改變

    語法:
    watch: { ? ? "被偵聽的屬性名" (newVal, oldVal){ ? ? ? ? ? }}
    完整例子代碼:
    <template> ?<div> ? ?<input type="text" v-model="name"> ?</div> </template> ?
    <script> export default { ?data(){ ? ?return { ? ? ?name: "" ? } }, ?// 目標:
    偵聽到name值的改變 ?/* 語法: ? watch: { ? ? 變量名 (newVal, oldVal){ ? ? ? //
    變量名對應值改變這里自動觸發 ? ? } ? } */ ?watch: { ? ?// newVal: 當前最新值 ? ?// oldVal: 上一刻值 ?
    ?name(newVal, oldVal){ ? ? ?console.log(newVal, oldVal); ? } } } </script> ?
    <style> ? </style>
    2.2 深度偵聽和立即執行

    偵聽復雜類型, 或者立即執行偵聽函數
    watch: { "要偵聽的屬性名": { immediate: true, // 立即執行 deep: true, // 深度偵聽復雜類型內變化
    handler (newVal, oldVal) { } } }
    完整例子代碼:
    <template> ?<div> ? ?<input type="text" v-model="user.name"> ? ?<input
    type="text" v-model="user.age"> ?</div> </template> ? <script> export default {
    ?data(){ ? ?return { ? ? ?user: { ? ? ? ?name: "", ? ? ? ?age: 0 ? ? } ? } },
    ?// 目標: 偵聽對象 ?/* 語法: ? watch: { ? ? 變量名 (newVal, oldVal){ ? ? ? //
    變量名對應值改變這里自動觸發 ? ? }, ? ? 變量名: { ? ? ? handler(newVal, oldVal){ ? ? ? ? }, ? ?
    ? deep: true, // 深度偵聽(對象里面層的值改變) ? ? ? immediate: true // 立即偵聽(網頁打開handler執行一次)
    ? ? } ? } */ ?watch: { ? ?user: { ? ? ?handler(newVal, oldVal){ ? ? ? ?//
    user里的對象 ? ? ? ?console.log(newVal, oldVal); ? ? }, ? ? ?deep: true, ? ?
    ?immediate: true ? } } } </script> ? <style> ? </style>
    ?immediate?立即偵聽

    ?deep?深度偵聽

    handler?固定方法觸發

    2.3 案例-品牌管理(數據緩存)

    ?偵聽list變化, 同步到瀏覽器本地

    *
    需求: 把品牌管理的數據實時同步到本地緩存

    分析:

    ① 在watch偵聽list變化的時候, 把最新的數組list轉成JSON字符串存入到localStorage本地

    ② data里默認把list變量從本地取值, 如果取不到給個默認的空數組

    效果:

    新增/刪除 – 刷新頁面 – 數據還在
    <template> ?<div> ? ?<div class="container"> ? ? ?<!-- 頂部框模塊 --> ? ? ?<div
    class="form-group"> ? ? ? ?<div class="input-group"> ? ? ? ? ?<h4>品牌管理</h4> ? ?
    ? ?</div> ? ? ?</div> ? ? ? ?<!-- 數據表格 --> ? ? ?<table class="table
    table-bordered table-hover mt-2"> ? ? ? ?<thead> ? ? ? ? ?<tr> ? ? ? ? ?
    ?<th>編號</th> ? ? ? ? ? ?<th>資產名稱</th> ? ? ? ? ? ?<th>價格</th> ? ? ? ? ?
    ?<th>創建時間</th> ? ? ? ? ? ?<th>操作</th> ? ? ? ? ?</tr> ? ? ? ?</thead> ? ? ?
    ?<tbody> ? ? ? ? ?<tr v-for="obj in list" :key="obj.id"> ? ? ? ? ? ?<td>{{
    obj.id }}</td> ? ? ? ? ? ?<td>{{ obj.name }}</td> ? ? ? ? ? ? ?<!--
    如果價格超過100,就有red這個類 --> ? ? ? ? ? ?<td :class="{ red: obj.price > 100 }">{{
    obj.price }}</td> ? ? ? ? ? ?<td>{{ obj.time | formatDate }}</td> ? ? ? ? ?
    ?<td><a href="#" @click="delFn(obj.id)">刪除</a></td> ? ? ? ? ?</tr> ? ? ? ?
    ?<!-- 4. 統計得有數據才顯示 --> ? ? ? ? ?<tr v-if="list.length !== 0"
    style="background-color: #eee"> ? ? ? ? ? ?<td>統計:</td> ? ? ? ? ? ?<td
    colspan="2">總價錢為: {{ allPrice }}</td> ? ? ? ? ? ?<td colspan="2">平均價: {{
    avgPrice }}</td> ? ? ? ? ?</tr> ? ? ? ?</tbody> ? ? ? ?<tfoot
    v-show="list.length === 0"> ? ? ? ? ?<tr> ? ? ? ? ? ?<td colspan="5"
    style="text-align: center">暫無數據</td> ? ? ? ? ?</tr> ? ? ? ?</tfoot> ? ?
    ?</table> ? ? ? ?<!-- 添加資產 --> ? ? ?<form class="form-inline"> ? ? ? ?<div
    class="form-group"> ? ? ? ? ?<div class="input-group"> ? ? ? ? ? ?<input ? ? ?
    ? ? ? ?type="text" ? ? ? ? ? ? ?class="form-control" ? ? ? ? ? ?
    ?placeholder="資產名稱" ? ? ? ? ? ? ?v-model="name" ? ? ? ? ? ?/> ? ? ? ? ?</div> ?
    ? ? ?</div> ? ? ? ?     ? ? ? ?<div class="form-group"> ? ?
    ? ? ?<div class="input-group"> ? ? ? ? ? ?<input ? ? ? ? ? ? ?type="text" ? ? ?
    ? ? ? ?class="form-control" ? ? ? ? ? ? ?placeholder="價格" ? ? ? ? ? ?
    ?v-model.number="price" ? ? ? ? ? ?/> ? ? ? ? ?</div> ? ? ? ?</div> ? ? ?
    ?     ? ? ? ? ?<button class="btn btn-primary"
    @click.prevent="addFn">添加資產</button> ? ? ?</form> ? ?</div> ?</div> </template>
    <script> // 目標: 偵聽list改變 - 同步到本地localStorage里 // 1. 偵聽器-list export default { ?
    ?data(){ ? ? ? ?return{ ? ? ? ? ? ?name: "", // 名稱 ? ? ?price: 0, // 價格 ? ? ?//
    3. 本地取出緩存list ? ? ?list: JSON.parse(localStorage.getItem('pList')) || [], ? };
    }, ?methods: { ? ?addFn() { ? ? ?if (this.name.trim().length === 0 ||
    this.price === 0) { ? ? ? ?alert("不能為空"); ? ? ? ?return; ? ? } ? ? ? ?let id =
    ? ? ? ?this.list.length === 0 ? 100 : this.list[this.list.length - 1].id + 1; ?
    ? ? ?this.list.push({ ? ? ? ?// 當前數組最后一個對象的id+1作為新對象id值 ? ? ? ?id: id, ? ? ?
    ?name: this.name, ? ? ? ?price: this.price, ? ? ? ?time: new Date(), ? ? }); ?
    }, ? ?delFn(id){ ? ? // 通過id找到這條數據在數組中下標 ? ? ?let index =
    this.list.findIndex(obj => obj.id === id) ? ? ?this.list.splice(index, 1) ? }
    }, ?computed: { ? ? ?allPrice(){ ? ? ? ? ?return this.list.reduce((sum, obj) =>
    sum += obj.price, 0) ? ? }, ? ? ?avgPrice(){ ? ? ? ? ?return (this.allPrice /
    this.list.length).toFixed(2) ? ? } }, ?watch: { ? ?list: { ? ? ?handler(){ ? ?
    ? ?// 2. 存入本地 ? ? ? ?localStorage.setItem('pList', JSON.stringify(this.list)) ?
    ? }, ? ? ?deep: true ? } } }; </script> <style scoped> .red { ?color: red; }
    </style>

    技術
    下載桌面版
    GitHub
    百度網盤(提取碼:draw)
    Gitee
    云服務器優惠
    阿里云優惠券
    騰訊云優惠券
    華為云優惠券
    站點信息
    問題反饋
    郵箱:ixiaoyang8@qq.com
    QQ群:766591547
    關注微信
    巨胸美乳无码人妻视频