微信小程序指令和vue指令的一些区别-即速应用

微信小程序指令和vue指令的一些区别

浏览量：3396 时间：2020-01-11 来源：a_little xixi

最近自己看了些小程序的demo，自己总结了点内容。
1、动态绑定class的
vue利用v-bind绑定或者简写成

<div :class="[classA, { classB: isB, classC: isC }]">

微信小程序，利用三目运算符来判断是否含有这个class

<view class="classA {{isB ? 'classB':''}}"></view >

2、for循环
vue利用v-for

<div v-for="(item, index) in items"></div>

微信小程序block标签并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

<block wx:for="{{items}}" wx:key="this"><text>{{item.txt}}</text></block>

此处需要使用wx:key如果不用的话，控制台会出现警告，这边直接等于this。代表在for循环中的item自身，这种表示需要item本身就是一个唯一的字符串或者数字。可以参考这个博主写的比较具体，我也是看他写的内容作出的修改

3、ajax请求的区别
vue中使用的是axios调用get或者post等方法，可参考axios官方api，以下列举get方法请求。其中用在的钩子函数不多解释

created () {   this.axios.get('http://www.sojson.com/open/api/weather/json.shtml?city=杭州').then(function(res){       console.log(res);              }).catch(function(err){       console.log(err)   });},

微信小程序中使用的是 wx.request()方法可以参考wx官方api

onLoad: function () {    wx.request({      url: 'http://www.sojson.com/open/api/weather/json.shtml?city=杭州',       method: "GET",      header: {        'content-type': 'json'       },      success(res) {        console.log(res)      }    });  }