VUE进阶笔记(2)- API

作者: woow_wu7 | 来源:发表于2017-08-29 18:51 被阅读39次
选项/资源

(1) filters

  • 类型:object
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: [ ]
  }
})

相关文章

网友评论

    本文标题:VUE进阶笔记(2)- API

    本文链接:https://www.haomeiwen.com/subject/bosvdxtx.html