[TOC]
  • 为什么不建议以对象的形式data:{ name:'xxx' }初始化数据?
    • 直接以对象的方式写数据 , 关闭页面在打开页面我们的变量不会被初始化 , 会保留我们上次的变量值
    • 所以要用 data(){ return { name:'xxx' } } 这样调用的方式来初始化数据 , 每次进入页面变量值都会被刷新

      数据绑定

      ```vue
<a name="JN5av"></a>
## 条件判断

- v-if 判断真 | 假
```vue
<template>
    <view v-bind:class="classname" v-on:click="open">
        {{title}}
        <hr />
        <view v-if="show === 'uni'">uni</view>
        <view v-else-if="show === 'vue'">vue</view>
        <view v-else>html</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello',
                classname: 'active',
                show: 'uni',
                arr: [1, 2, 3, 4, 5]
            }
        },
        onLoad() {
        },
        methods: {
        }
    }
</script>

列表渲染基础

  • v-for ```vue
<a name="g4RCm"></a>
## 获取数据属性
```vue
<template>
  <view class="content">
    <view data-index="123" @click="has(1, $event)"> 测试 </view>  //直接使用 event
  </view>
</template>

<script>
export default {
  methods: {
    has(index,event) {
        console.log(index);
        console.log(event)
        console.log(event.currentTarget.dataset.index);
    },
  },
};
</script>

基础语法 - 图1