判断动态添加class
// vue版本
<view :class="{active: current=== index}"></view>
// 原生
<view class="{{current === index ? 'current' : '' }}"></view>
循环
// vue
<view v-for="(item, index) in []" :key="index"></view>
// 原生
<view wx:for="[]" wx:key="index"></view>
// 原生循环会默认指定item为当前项, index是索引,如果要修改变量名
<view wx:for="[]" wx:key="index" wx:for-item="subItem" wx:for-index="subIndex"></view>
事件
// vue
<view @click="handleClick(index)"></view>
// vue的js代码
methods: {
handleClick(index){}
}
// 原生
<view bindtap="handleClick" data-index="index"></view>
// 原生的事件函数和onload,data同级的
handleClick(event){
// 参数
event.currentTarget.dataset.index
}
原生组件的导入
// 在页面的.json配置文件中修改usingComponents
{
"usingComponents": {
// search是自定义的组件名,值是组件的文件地址
"search": "../../components/search/index"
}
}
赋值
// vue 直接赋值
this.list = ['1','2','3'];
// 原生 this.setData修改
this.setData({
list:['1','2','3']
})
模板
//vue 模板只有一个根标签
<template>
<view></view>
</template>
// 原生 wxml可以多个并列根标签
<view></view>
<view></view>