Vue-03-xiaoming
2018-09-17 本文已影响0人
QAQ小明
2018-09-16
学了几天的vue，或许有些问题还是懵懵懂懂，但是至少付出了努力，想着去吧vue尽可能学懂。所以，今天在老师的引导下做了几个简单的应用实例。
所以，开始的开始，我们先一起来复习一下吧！
①v-for=" " 循环操作数组对象 。
②v-model=" " 双向数据绑定=》》表单元素。
③v-on：事件="函数名" 绑定一个事件=》》也可以简写为 =》》@事件名="函数名"=》》@click=" "。
④v-bind：属性名="值" ， 简写=》》：属性值="值"=》》:src="url"。
⑤v-show=" " ,控制元素显示或者隐藏，也就是我们所学过css里的display：none；
⑥v-if=" ",也是控制元素显示或者隐藏=》》原理：visibility:hidden；
⑦v-else/v-else-if
不需要表达式，前一兄弟必须有v-if或v-else-if
if(){}
if(条件){1}else{2}
else...if 多重条件语句
if(){
}else if(){
}else if(){
}else{
}
之后我们就来了解一下关于这些指令实例。
FIRST:
购物车=》》
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<div class='container'>
<table class='table table-bordered text-center'>
<thead>
<tr>
<th class="text-center">编号</th>
<th class="text-center">品名</th>
<th class="text-center">单价</th>
<th class="text-center">数量</th>
<th class="text-center">小计</th>
</tr>
</thead>
<tbody>
<tr v-for="(value,index) in list">
<td>{{index+1}}</td>
<td>{{value.pname}}</td>
<td>{{value.price}}</td>
<td>
<button @click='add(index)'>+</button>
<span>{{value.count}}</span>
<button @click='redu(index)'>-</button>
</td>
<td>{{value.sub}}</td>
</tr>
<tr>
<td colspan="5">总价：￥{{sum}}</td>
</tr>
</tbody>
</table>
</div>
<script src='js/vue.js'></script>
<script type="text/javascript">
new Vue({
el: '.container',
data: {
list: [{
pname: 'apple',
price: 3,
count: 2,
sub: 6
}, {
pname: 'pear',
price: 4,
count: 3,
sub: 12
}, {
pname: 'banana',
price: 5,
count: 4,
sub: 20
}],
sum: 0
},
methods: {
add: function(ind) {
//数量
this.list[ind].count++;
//改变小计
this.list[ind].sub = this.list[ind].count * this.list[ind].price;
this.total();
},
redu: function(ind) {
//数量
if(this.list[ind].count > 1) {
this.list[ind].count--;
}
//小计
this.list[ind].sub = this.list[ind].count * this.list[ind].price;
this.total();
},
total: function() {
for(var i = 0； total = 0; i < this.list.length; i++) {
total += this.list[i].sub
}
this.sum = total
}
}
})
</script>
</body>
</html>
效果图：
shopping.png
SECOND:
选项卡共两种方法==>
方案①.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.app,
li {
border: 1px solid #000;
list-style: none;
float: left;
}
</style>
</head>
<body>
<div class="app">
<div v-for="(value,index) in arr" v-show="ars[index]"> {{value}} </div>
<ul>
<li v-for="(value,index) in arr" @click="qwer(index)"> {{index+1}} </li>
</ul>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el: ".app",
data: {
arr: ['QAQ', 'QWQ', 'QTQ'],
ars: [true, true, true]
},
methods: {
qwer: function(ind) {
this.ars = [!true, !true, !true], this.ars[ind] = true
}
}
})
</script>
</body>
</html>
选项卡01.png
选项卡02.png
选项卡03.png
方案②：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
li{
list-style: none;
float: left;
border:15px solid #000;
}
</style>
</head>
<body>
<div id='itany'>
<ul>
<li v-for='(value,index) in card' @click='chg(index)'>{{value.title}}</li>
</ul>
<ul>
<li v-for='(value,index) in card' v-show='value.flag'>{{value.content}}</li>
</ul>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:"#itany",
data:{
card:[
{title:'CEO',content:' CEO Chief Executive Officer 首席执行官 ',flag:true},
{title:'COO',content:' COO Chief Operating Officer 首席运营官 ',flag:false},
{title:'CFO',content:' CFO Chief Financial Officer [首席财务官]',flag:false}
]
},
methods:{
chg:function(ind){
for(var i=0;i<this.card.length;i++){
this.card[i].flag=false;
}
this.card[ind].flag=true;
}
}
})
</script>
</body>
</html>
效果图：
选项卡04.png
选项卡05.png
选项卡06.png
THIRD
用户管理==>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div class='container'>
<form action="">
<div class='form-group'>
<label for="">用户名</label>
<input type="text" class='form-control' placeholder="请输入用户名" v-model="student.uname">
</div>
<div class='form-group'>
<label for="">密码</label>
<input type="text" class='form-control' placeholder="请输入密码" v-model="student.pass">
</div>
<div class='form-group'>
<label for="">邮箱</label>
<input type="text" class='form-control' placeholder="请输入邮箱" v-model="student.email">
</div>
<div class='form-group text-center'>
<!-- success 绿色 info 蓝色 danger 红色 warning 黄色 primary 蓝色 -->
<input type="text" class='btn btn-success' value='添加' @click='add'>
<input type="text" class='btn btn-info' value='重置'>
</div>
</form>
<table class='table table-bordered'>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>密码</th>
<th>邮箱</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(value,index) in user">
<td>{{index+1}}</td>
<td>{{value.uname}}</td>
<td>{{value.pass}}</td>
<td>{{value.email}}</td>
<td>
<button @click='delt(index)'>删除</button>
</td>
</tr>
</tbody>
</table>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el: '.container',
data: {
user: [{
uname: 'jack',
pass: '123456',
email: '123@126.com'
},
{
uname: 'rose',
pass: '789456',
email: '456@126.com'
},
{
uname: 'tom',
pass: '456321',
email: '789@126.com'
}
],
student: {}
},
methods: {
add: function() {
//浅克隆
var newStu = {}
//循环student
for(var i in this.student) {
newStu[i] = this.student[i]
}
this.user.push(newStu);
// this.student={}
},
delt: function(ind) {
this.user.splice(ind, 1)
}
}
})
</script>
</body>
</html>
效果图：
用户管理.png
