教育微信小程序_vue2 v

日期:2021-01-07 类型:科技新闻 

关键词:如何创建网站,免费网站建站,网站建设文章,网站建设7个基本流程,自动建站

vue2 v-model/v-text 中使用过滤器的方法示例       这篇文章主要介绍了vue2 v-model/v-text 中使用过滤器的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

Vue.js 允许自定义过滤器,一般可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:

 !-- 在双花括号中 -- 
{{ message | capitalize }}
 !-- 在 v-bind 中 -- 
 div v-bind:id="rawId | formatId" /div 

可以在一个组件的选项中定义私有的过滤器:

filters: {
 dateFormat: (dataStr) = {
 var time = new Date(dataStr);
 function timeAdd0(str) {
 if (str 10) {
 str = '0' + str;
 return str
 var y = time.getFullYear();
 var m = time.getMonth() + 1;
 var d = time.getDate();
 var h = time.getHours();
 var mm = time.getMinutes();
 var s = time.getSeconds();
 return y + '-' + timeAdd0(m) + '-' + timeAdd0(d) + ' ' + timeAdd0(h) + ':' + timeAdd0(mm) + ':' + timeAdd0(s);

或者在创建 Vue 实例之前全局定义过滤器:

Vue.filter('dateFormat', (dataStr) = {
 var time = new Date(dataStr);
 function timeAdd0(str) {
 if (str 10) {
 str = '0' + str;
 return str
 var y = time.getFullYear();
 var m = time.getMonth() + 1;
 var d = time.getDate();
 var h = time.getHours();
 var mm = time.getMinutes();
 var s = time.getSeconds();
 return y + '-' + timeAdd0(m) + '-' + timeAdd0(d) + ' ' + timeAdd0(h) + ':' + timeAdd0(mm) + ':' + timeAdd0(s);

但是如果想要在v-model或者v-text中使用过滤器是不生效的,可以参考以下写法:

 template 
 div id="app" 
 input type="text" v-model="userDate" / 
 span {{ userDate | dateFormat }} /span 
 /div 
 /template 
 script 
export default {
 data: {
 return {
 userDate:'',
 filters: {
 dateFormat: (dataStr) = {
 var time = new Date(dataStr);
 function timeAdd0(str) {
 if (str 10) {
 str = '0' + str;
 return str
 var y = time.getFullYear();
 var m = time.getMonth() + 1;
 var d = time.getDate();
 var h = time.getHours();
 var mm = time.getMinutes();
 var s = time.getSeconds();
 return y + '-' + timeAdd0(m) + '-' + timeAdd0(d) + ' ' + timeAdd0(h) + ':' + timeAdd0(mm) + ':' + timeAdd0(s);
 /script 
 style 
 /style 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。