vue小白遇到了坑一分享

• 前面说到自己已然成为了一名光荣的前端工程师，虽然自己也称不上后面的那三个字，总感觉自己还是有点小垃圾~~~~一直在学习中

一直盼望着能够从h5,原生的js中跳出来，去看看vue的世界，好了，这不就来了么，上手后，用了大概两三天的时间下载软件，进行一些配置，到之后的从github上拷了一份代码来瞧了瞧，也开始慢慢的着手开始画了，没毛病的，我依旧画的是手机端🤷
所以我这次用的是：vant👉轻量可靠的移动端Vue组件库

当然首次运用，虽然有很多已经写好了组件，可以直接用，但是还是会遇到一些问题，下面就让我们记录一下

1. 我们知道，vue中的动态数据一般都是在script里面的data中进行同步的，保持上下一直，而在
   中呢，是用双括号进行标注，以便和data中的保持一致，命名相同才可以识别
   但是在写到关于图片img的时候，就会遇到一些问题，比如图片路径并没有写错，而在这种情况下，就需要在图片的url前新增require，示例如下

<template>
  <div>
	<img :src="img1"/>
  </div>
</template>
<script>
export default {
  data() {
    return {
      img1:require('../../assets/image/pic/icon_region_in.png'),
      }
    }
  }
  </script>

此中，img标签中的src前面加了:则是与下面的数据进行绑定，而具体的则是img1这个图片，如果将data中的图片路径进行更换，则可以改变主体部分的图片内容。

2.在vue中循环数据的时候，可能会针对不同的内容给予不同的样式或者是展现不同的内容，如此就要进行动态绑定数据以此来进行对数据的动态渲染变换，示例如下：

<template>
  <div>
	<img :src="num === 1 ? img1:img2 "/>
  </div>
</template>
<script>
export default {
  data() {
    return {
      num:1
      img1:require('../../assets/image/pic/icon_region_in.png'),
      img2:require('../../assets/image/pic/icon_region_success.png'),
      }
    }
  }
  </script>

在这里如果，data中的数值为1,则图片将渲染img1的内容，否则将渲染img2中的内容，这里就是三元表达式的应用

3.上面说到的是三元表达式，那我们有时候就会遇到更多的判断条件啦，毕竟人们的条件和要求总是能无限的增加，怎么能不允许人家判断条件不能有个小三小四小五呢，那遇到这些情况该如何呢，我们依旧利用上面的示例，具体如下：

<template>
  <div>
	<img :src="num === 1 ? img1 ：num === 2 ? img2 : img3 "/>
  </div>
</template>
<script>
export default {
  data() {
    return {
      num:1
      img1:require('../../assets/image/pic/icon_region_in.png'),
      img2:require('../../assets/image/pic/icon_region_success.png'),
      img3:require('../../assets/image/pic/icon_region_error.png'),
      }
    }
  }
  </script>

在这里即表示为当num为1的时候，则图片渲染img1的，如果是num为2的时候，则图片渲染img2的，其余则渲染img3，当然如果有更多的条件那么就继续这么写下去👉

<img :src="num === 1 ? img1 ：num === 2 ? img2 : num === 3 ? img3 : img4 "/>

当然后面的内容在data中要有过定义哦，不然会报错

4.在写div的时候不可以用v-model方法，因为v-model只有input才可以用这个方法，进行数据的双向绑定，这部分就直接使用双括号进行绑定数据即可{{ ==这里才是你的数据小可爱，看过来 == }}

5.关于v-for: v-for="(item, index) in list" :key=“index”
在用v-for循环的时候，一定要有一个key来区别此时元素的唯一性，所以可以将Index一起放入进行循环。而index是不重复的从0开始的，类似于是我们熟知的 i

好了好了，这两天遇到的vue的迷惑暂时只有这么多，当然遇到问题的时候，我们需要去解决它，拨开迷雾才能柳暗花明又一村，见遍代码中大千世界的神奇，好了，下次我们遇到问题再见ヾ(•ω•`)o
这里是一只可爱的前端小猿–困困
笔芯🙆‍♀️