選項(xiàng)/資源
(1) filters
js部分
var vm = new Vue({
el:'#app',
data: {},
mounted: function() {},
filters:{
formatMoney: function (value,type) {
return "¥ "+value.toFixed(2) + type; //value是默認(rèn)參數(shù)
},
},
methods:{}
})
----------------------------
html部分
<div class="cart-tab-4">
<div class="item-price-total">
{{product.productPrice*product.productQuentity | formatMoney('元')}} //第二個(gè)參數(shù)
</div>
</div>
---------------------------
輸出結(jié)果: ¥ xxxx.00 元
全局API
(1)Vue.filter
Vue.filter( id, [definition] )
--------------------------------------
參數(shù):
- {string} id
- {Function} [definition]
--------------------------------------
用法:
// 注冊(cè)
Vue.filter('my-filter', function (value) {
// 返回處理后的值
})
// getter,返回已注冊(cè)的過濾器
var myFilter = Vue.filter('my-filter')
-------------------------------------------
例子:
Vue.filter('formatMoney', function(value,type) {
return "¥ "+value.toFixed(2) + type;
} )
指令
(1) v-modal
限制:
<input>
<select> //下拉列表
<textarea>
components
只能用在以上的內(nèi)容中
------------------------------------
修飾符:
.lazy - 取代 input 監(jiān)聽 change 事件
.number - 輸入字符串轉(zhuǎn)為數(shù)字
.trim - 輸入首尾空格過濾
------------------------------------
用法:
在表單控件或者組件上創(chuàng)建雙向綁定妄呕。
------------------------------------
(1)文本:
html
<input v-model="message" placeholder="edit me"> //ps: disabled不允許編輯
<p>Message is: {{ message }}</p>
--------
js
data:{
message:' '
}
----------------------------------
(番外) <label>
- <label> 標(biāo)簽為 input 元素定義標(biāo)注(標(biāo)記)
- label 元素不會(huì)向用戶呈現(xiàn)任何特殊效果。不過董栽,它為鼠標(biāo)用戶改進(jìn)了可用性。如果您在 label 元素內(nèi)點(diǎn)擊文本郭卫,
就會(huì)觸發(fā)此控件嘀倒。就是說,當(dāng)用戶選擇該標(biāo)簽時(shí)旧乞,瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
- <label> 標(biāo)簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同磅氨。
----------------------------------
(2) 復(fù)選框
- 單個(gè)勾選框尺栖,邏輯值:
html
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
-------------
js
data:{
checked: 'false',
},
-------------
- 多個(gè)勾選框,綁定到同一個(gè)數(shù)組:
html
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
--------------------------------------
js
new Vue({
el: '...',
data: {
checkedNames: [ ]
}
})
最后編輯于 :
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者