選項(xiàng)/資源

(1) filters

• 類型：object

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: [ ]
  }
})