1.深淺監聽
watch:,//深監聽
json:,
//主要通過deep屬性
deep:true
}, 注意：不建議使用深監聽，通常轉換為淺監聽方式
}
a.跨域的解決 jsonp
b.通過監聽使用者輸入，傳送請求，渲染頁面
doctype html
>
<
html
lang
='en'
>
<
head
>
<
meta
charset
='utf-8'
>
<
meta
name
='viewport'
content
='width=device-width,
initial-scale
=1.0'
>
<
title
>document
title
>
<
style
>
.select
style
>
head
>
<
body
>
<
div
id>
<
input
type
="text"
v-model
='search'
@keydown.up.prevent
='up'
@keydown.down
= 'down'
@keydown.enter
= 'enter'
>
<
ul>
<
li v-for
='(item,index)
in arr' :key
='item'
:class
='[index==n?"select":""]'
>}
li>
ul>
div>
body
>
<
script
src='./vue.js'
>
script
>
<
script
>
let vm
=new
vue(,
methods:
},up()
},enter()
else}},
watch:
//傳送資料請求 jsonp方式
varos
=document.createelement(
'script');
os.src ='
'+this
.search;}},
})
function
aa(res)
script
>
html
>
全域性： vue.fliter('過濾器名字',**函式) **函式中做的是業務邏輯
區域性：在vue例項中通過filters配置項來配置 filters: }
案例:1.**號碼過濾
<div
id>
}div
>
vue.filter('filtertel',(tel)=>)
2.過濾**
<div
id>
}
div>
vue.filter('filterprice',(price)=>)
3.過濾時間
<div
id>
<
div>當前時間}
div>
div>
vue.filter('filtertime',(time)=>-$-$ $:$:$`
})
通過計算得出來的，所以就沒有初始值
流程：1.先畫靜態頁面 利用bs
<div
idclass
="container"
>
<
h2>購物車
h2>
<
table
class
="table table-bordered table-hover"
>
<
tr>
<
th>
<
input
type
="checkbox"
v-model
='allchecked'
@change
='checkall'
>
全選
th>
<
th>商品名稱
th>
<
th>商品單價
th>
<
th>商品數量
th>
<
th>小計
th>
<
th>操作
th>
tr>
<
tr v-for
='(item,index)
in list' :key
='item.id'
>
<
td>
<
input
type
="checkbox"
v-model
='item.checked'
@change
='changeone(index)'
>
td>
<
td>}
td>
<
td>}
td>
<
td>
<
button
type
="button"
class
="btn btn-primary"
@click
= 'cut(index)'
>-
button
>
<
span
>}
span
>
<
button
type
="button"
class
="btn btn-danger"
@click
= 'add(index)'
>+
button
>
td>
<
td>小計:}
td>
<
td><
button
type
="button"
class
="btn btn-primary"
@click
= 'del(index)'
>刪除
button
>
td>
tr>
<
tr>
<
td colspan
="6"
>總價:}
td>
tr>
table
>
div>
2.實現點選新增，點選減少數量，點選刪除功能
let vm = new vue(,,,,]
},methods: ,
cut(index)
},del(index),
// 全選
checkall())
},//改變乙個的狀態
changeone(index)
},})
3.判斷選中狀態完成總價的計算
<tr>
<
td colspan
="6"
>總價:}
td>
tr>
computed:
})return sum
}}
vue過濾器和監聽
過濾器 過濾器的主要作用 對資料的處理 獲得乙個時間 一般是時間戳格式 同乙個時間顯示不同的樣子 對資料做處理 返回處理過的新資料 vue.filter 引數1 過濾器名 引數2 是乙個函式 函式的第乙個引數data就是要過濾的資料 也就是管道符號前面的東西 vue.filter hehe data...
vue 過濾器，偵聽器，計算屬性
常用於文字格式化，可以用在插值表示式和v bind屬性繫結，使用管道符 呼叫，過濾器本質上是乙個函式，在與method同級定義，fliters 且過在vue3.0過濾器已移除，顯示的值是過濾器的返回值 必須有 在過濾器的第乙個形參就可以獲取到管道前待處理的值。全域性過濾器 vue.filter na...
屬性過濾器
在昨天由老師帶領我們統一回顧了一下屬性過濾器，個人感覺像這種過濾器選擇器之類的並不算太難，只要自己認真一點基本不會有什麼錯誤，所以最主要的還是細心，不馬虎。屬性過濾器jquery內容 function 屬性過濾器boby內容 鏈結1 鏈結2鏈結1 然後在這個之後又重新回顧了表單選擇器，又相對做了一部...