选项/资源
(1) filters
js部分
var vm = new Vue({
el:'#app',
data: {},
mounted: function() {},
filters:{
formatMoney: function (value,type) {
return "¥ "+value.toFixed(2) + type; //value是默认参数
},
},
methods:{}
})
----------------------------
html部分
<div class="cart-tab-4">
<div class="item-price-total">
{{product.productPrice*product.productQuentity | formatMoney('元')}} //第二个参数
</div>
</div>
---------------------------
输出结果: ¥ xxxx.00 元
全局API
(1)Vue.filter
Vue.filter( id, [definition] )
--------------------------------------
参数:
- {string} id
- {Function} [definition]
--------------------------------------
用法:
// 注册
Vue.filter('my-filter', function (value) {
// 返回处理后的值
})
// getter,返回已注册的过滤器
var myFilter = Vue.filter('my-filter')
-------------------------------------------
例子:
Vue.filter('formatMoney', function(value,type) {
return "¥ "+value.toFixed(2) + type;
} )
指令
(1) v-modal
限制:
<input>
<select> //下拉列表
<textarea>
components
只能用在以上的内容中
------------------------------------
修饰符:
.lazy - 取代 input 监听 change 事件
.number - 输入字符串转为数字
.trim - 输入首尾空格过滤
------------------------------------
用法:
在表单控件或者组件上创建双向绑定。
------------------------------------
(1)文本:
html
<input v-model="message" placeholder="edit me"> //ps: disabled不允许编辑
<p>Message is: {{ message }}</p>
--------
js
data:{
message:' '
}
----------------------------------
(番外) <label>
- <label> 标签为 input 元素定义标注(标记)
- label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,
就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
- <label> 标签的 for 属性应当与相关元素的 id 属性相同。
----------------------------------
(2) 复选框
- 单个勾选框,逻辑值:
html
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
-------------
js
data:{
checked: 'false',
},
-------------
- 多个勾选框,绑定到同一个数组:
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: [ ]
}
})
网友评论