原生小程序的写法与vue 写法的不同

1. view 代替了原来的div标签。

2. wx:if 代替了原来的v-if 。wx:elif. 代替了原来的v-else-if 。

3: text 代替了原来的p 标签。

4. catch:tap 或者bind:tap 代替了click 事件，且不支持修饰符。

5. 自定义data-id属性，代替了click中进行传参。通过点击事件e.currentTarget.dataset.id 来获取。

6. vue 中的一些methods 方法直接写到了data中。

formatter(type, val) {

    if (type === "year") {

         return `${val}年`;

    } else if (type === "month") {

         return `${val}月`;

    }

        return val;

},

<van-popup show="{{ showDatetimePicker }}" round position="bottom"

>

     <van-datetime-picker title="选择开始时间"

         type="date" formatter="{{ formatter }}"

         value="{{ currentDate }}"

         min-date="{{ minDate }}"  

         max-date="{{ maxDate }}" 

         bind:confirm="checkDate" 

         bind:cancel="cancelCheckDate"

/>

</van-popup>

7. data 中属性改变 小程序原生

this.setData({

   finished: true

})

8. wx:key='*this' 每个循环体本身类似wx:key='item'

9. class中可以直接插入变量和三元运算符

class="{{swiperClass}}"

class="weui-tabs-bar__title {{tabClass}} {{activeTab === index ? activeClass : ''}}"

10. style 中插入动态变量

style="border-bottom-color: {{activeTab === index ? tabUnderlineColor : 'transparent'}}"  // 键值对外层没有包裹。

11. 自定义属性也可以在循环体中插入变量

data-index = 'index'