vue - 小程序 - uniApp(vsCode)语法区别-完善中...

一、类名渲染格式

Vue中的类名渲染格式为v-bind或简写符号":" 例如

// 动、静态类名可以共存
<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }">
</div>


data: {
  isActive: true,
  hasError: false
}

微信小程序中的类名渲染格式为"{{}}" 例如

<view class="{{isActive ? 'active' : ''}}"></view>

uni-app中的类名渲染格式为":"或"{{}}" 例如

<view :class="{ active: isActive }"></view>

 三者基础模板渲染都是{{ }}

<template>
<!--  <view>{{ message }}</view>  -->
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello!'
    }
  }
}
</script>

---

二、行内式的写法

静态就直接写sty.....不加{ }

Vue中的行内式写法/动态为v-bind或简写符号":" 例如

<div :style="{ color: activeColor, font-size: fontSize + 'px' }"></div>

微信小程序中的行内式写法为"{{}}" 例如

<view style="color:{{activeColor}}; font-size:{{fontSize + 'px'}}"></view>

uni-app中的行内式写法同样为"{{}}" 例如

<view :style="{ color: activeColor, 'font-size': fontSize + 'px' }"></view>

需要注意的是，在微信小程序和uni-app中，如果要使用JavaScript变量拼接字符串，需要使用+连接符，同时在vue中也需要用到+连接符，但需要在表达式中使用。例如，在微信小程序和uni-app中

---

 for循环-尤其注意key不要和小程序混淆了

vue

// 注意vue中:key-是需要-item.id-的，不要小程序写多混淆了
<ul id="example-1">
  <li v-for="item in list" :key="item.id">
    {{ item.message }}
  </li>
</ul>

小程序 

<ul id="example-1">
  <li v-for="list" :key="id">
    {{ item.message }}
  </li>
</ul>