Vue小案例 之 商品管理------创建页面与部分数据

logo的路径:

Vue小案例 之 商品管理------创建页面与部分数据

页面的初始布局:

Vue小案例 之 商品管理------创建页面与部分数据

初始的HTML:

<div id="container">

            <!--logo title-->
<div class="header">
<img :src="imgUrl+imgName" class="logo" height="200px" width="150px" style="padding-top: 0px; float: left;"/>
<h1 class="title">商品管理</h1> </div> <!--输入部分input-->
<div class="form-warp">
<div class="title">添加商品</div>
<div class="content"> 商品编号:<input type="text" placeholder="请输入商品编号" /><br />
商品名称:<input type="text" placeholder="请输入商品名称" /><br />
商品价格:<input type="text" placeholder="请输入商品价格" /><br />
商品数量:<input type="text" placeholder="请输入商品数量" /><br />
商品类型:<select> <option value="" disabled="disabled">--请选择--</option>
</select> </div>
<div class="form-btn"></div> </div>
<!--显示表格-->
<div class="table-warp"></div> </div>

初始css:

<style>
#container{
margin: auto;
text-align: center;
width: 1000px;
border:2px solid gray;
} </style>

初始vue:

<script>

            window .onload= () =>{
new Vue({
el:"#container",
data:{
imgUrl:'../res/images/',
imgName:'lovely.ico' },
methods:{ }
});
}
</script>

进行了定义变量和变量的引入以及使用了v-model与v-for进行遍历数组:

Vue小案例 之 商品管理------创建页面与部分数据

使用了v-model,v-for之后的代码:

<div id="container">

            <!--logo title-->
<div class="header">
<img :src="imgUrl+imgName" class="logo" height="200px" width="200px" style="padding-top: 0px; float: left;"/>
<h1 class="title">商品管理</h1> </div> <!--输入部分input-->
<div class="form-warp">
<div class="title">添加商品</div>
<div class="content"> 商品编号:<input type="text" placeholder="请输入商品编号" v-model="goods.id"/><br />
商品名称:<input type="text" placeholder="请输入商品名称" v-model="goods.name"/><br />
商品价格:<input type="text" placeholder="请输入商品价格" v-model="goods.price"/><br />
商品数量:<input type="text" placeholder="请输入商品数量" v-model="goods.num"/><br />
商品类型:<select v-model="goods.type"> <option value="" disabled="disabled">--请选择--</option>
<option v-for="type in goodsType">{{type}}</option> </select> </div>
<div class="form-btn"></div> </div>
<!--显示表格-->
<div class="table-warp"></div> </div>

vue代码:

<script>

            window .onload= () =>{
new Vue({
el:"#container",
data:{
imgUrl:'../res/images/',
imgName:'lovely.ico',
goods:{
id:'',
name:'',
price:'',
num:'',
type:''
},
goodsType:['零食','电子产品','生活用品'] },
methods:{ }
});
}
</script>

总的代码:

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品管理------创建页面与部分数据</title>
<script src="../js/vue.js"></script> <script> window .onload= () =>{
new Vue({
el:"#container",
data:{
imgUrl:'../res/images/',
imgName:'lovely.ico',
goods:{
id:'',
name:'',
price:'',
num:'',
type:''
},
goodsType:['零食','电子产品','生活用品'] },
methods:{ }
});
}
</script>
<style>
#container{
margin: auto;
text-align: center;
width: 1000px;
border:2px solid gray;
} </style>
</head>
<body>
<div id="container"> <!--logo title-->
<div class="header">
<img :src="imgUrl+imgName" class="logo" height="200px" width="200px" style="padding-top: 0px; float: left;"/>
<h1 class="title">商品管理</h1> </div> <!--输入部分input-->
<div class="form-warp">
<div class="title">添加商品</div>
<div class="content"> 商品编号:<input type="text" placeholder="请输入商品编号" v-model="goods.id"/><br />
商品名称:<input type="text" placeholder="请输入商品名称" v-model="goods.name"/><br />
商品价格:<input type="text" placeholder="请输入商品价格" v-model="goods.price"/><br />
商品数量:<input type="text" placeholder="请输入商品数量" v-model="goods.num"/><br />
商品类型:<select v-model="goods.type"> <option value="" disabled="disabled">--请选择--</option>
<option v-for="type in goodsType">{{type}}</option> </select> </div>
<div class="form-btn"></div> </div>
<!--显示表格-->
<div class="table-warp"></div> </div>
</body>
</html>

商品管理------创建页面与部分数据

上一篇:Linux 学习笔记之超详细基础linux命令 Part 9


下一篇:hdu N!