微信小程序mpvue 模板语法如何过滤? IOS new Date() 格式等问题

mpvue 不支持过滤器模板js语法

渲染部分会转成 wxml ,wxml 不支持过滤器,所以这部分功能不支持。

会把 template 中的 {{}} 双花括号的部分,直接编码到 wxml 文件中,由于微信小程序的能力限制(数据绑定),所以无法支持复杂的 JavaScript 表达式。

目前可以使用的有 + - * % ?: ! == === > < [] .,剩下的还待完善

<!-- 这种就不支持,建议写 computed -->
<p>{{ message.split('').reverse().join('') }}</p>

<!-- 但写在 @event 里面的表达式是都支持的,因为这部分的计算放在了 vdom 里面 -->
<ul>
    <li v-for="item in list">
        <div @click="clickHandle(item, index, $event)">{{ item.value }}</p>
    </li>
</ul>
//这里不支持wxs语法必须要在获取到数据的地方处理数据
let newArr=   list.map((val,index,arr)=>{
  val['new1']=val.new ? val.new.split(' '):''
  val['new2']=val.new ? val.new.split(' '):''
  return val
})
this.list=newArr

IOS new Date()

小程序项目 要比较二个时间 使用了 new Date() > new Date("2019-09-06 00:00:00")
在安卓和pc上面都无问题
但是在苹果上面用 new Date("2019-09-06 00:00:00") 就会出现问题 (无效的参数)

解决办法:时间格式都使用 new Date("2019/09/06 00:00:00")

就是把 - 替换成 / js语法 ( dateStr.replace(new Regex('-','gm'),'/') ) g 是全局搜索 m是多次匹配

网络图片动态切换不显示

<template>
  <div class="test">
	    <template v-if="isRouterAlive">
	    	<img :src="imgUrl">
	    </template>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      isRouterAlive:true,//2. 组件正常显示,然后再下面的方法进行销毁重建
      imgUrl:'http://baidu.com/img/1.png'
    }
  },
  methods:{
    getNewImg(){//1. 页面刷新方法
    	//this.$axios 这里模拟网络请求,返回新的img地址。渲染到组件中,正常没有刷新页面图片缓存没有更新
    	//所以需要重新销毁重建组件就会让图片资源重新请求更新
      this.isRouterAlive = false//3、定义方法,调动让他销毁掉
      this.$nextTick(()=>{
        this.isRouterAlive = true
      })
    }
  }
}
</script>

elementui索引分页递增

<el-table-column label="序号" type="index" width="50" align="center">
	<template slot-scope="scope">
		<span :class="{'color-no-mobiel':!scope.row.bindDriverUserMobile}">
			{{pageSize*(pageIndex-1)+scope.$index+1}}
		</span>
	</template>
</el-table-column>
发布了156 篇原创文章 · 获赞 531 · 访问量 11万+

猜你喜欢

转载自blog.csdn.net/qq_39043923/article/details/103482476
今日推荐