给学弟学妹们的项目开发笔记（二）

今天来简单的讲一下vue，仅供大家参考。
因为现在是要做项目，所以我就跳过大部分基础，直接来讲我在做项目时经常用到的几个部分。

v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 元素。

<!--未登录-->
        <el-menu-item index="2" v-if="islogin===2">
          <a href="/login" target="_Self">请登陆</a>
        </el-menu-item>

        <el-menu-item index="3" v-if="islogin===2">
          <a href="/regist" target="_Self">免费注册</a>
        </el-menu-item>

<!--已登陆状态-->
      <el-menu-item index="2" v-if="islogin===1" :data="userinfo">
        <el-dropdown>
          <span class="el-dropdown-link">{{userinfo.account}}</span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item><div class="block"><a href="/personal" target="_Self"><el-avatar :size="80" :src="userinfo.img"></el-avatar></a></div></el-dropdown-item>
            <el-dropdown-item><el-link href="/personal" target="_Self">我的账号</el-link></el-dropdown-item>
            <el-dropdown-item><el-link target="_Self" @click="quit">退出</el-link></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-menu-item>

效果如下：
islogin=2时：

islogin=1时：

<el-col :span="span" v-for="item in goodList" :key="item.id" style="margin: 20px" >
  <el-card :body-style="{ padding: '0px',margin: '0px' ,height:'340px'}"
           :data=goodList shadow="never">
     <!--商品图片-->      
    <img :src="item.img_path" class="image" :height="imgH">
    <div >
      <!--价钱-->
      <el-row style="margin-top: 10px">￥{{ item.price }}</el-row>
      <!--商品标题-->
      <span style="font-size: 12px;">
      	<el-link style="margin-top: 10px"@click="gotoGood(item.id)">
            {{ item.title }}
         </el-link>
      </span>
		<!--商品所在店铺名-->
      <el-row>
        <span><el-link>{{ item.shop_name }}</el-link> </span>
      </el-row>

    </div>
  </el-card>
</el-col>

效果图如下：

v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数。

<div>
  <span v-for="n in 10">{{ n }} </span>
</div>

先写到这