今天来简单的讲一下vue,仅供大家参考。
因为现在是要做项目,所以我就跳过大部分基础,直接来讲我在做项目时经常用到的几个部分。
v-if
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时:
v-for
我们可以用
v-for
指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名。
这里通过for循环将goodList中的商品的信息显示出来
<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>
先写到这