1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
| <head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue.js"></script>
<style>
.box{
color:red;
}
.box1{
color:green;
}
.box2{
color:blue;
}
</style>
</head>
<body>
<div id="qq">
<table border="1">
<tr>
<th>编号</th>
<th>种类</th>
<th>性别</th>
</tr>
<!--在标签内循环 v值，k键 in 数组-->
<tr v-for="(v,k) in menus">
<th>{{k}}</th>
<th>{{v.type}}</th>
<th>{{v.sex}}</th>
</tr>
</table >
<input type="text" v-model="num">
<!--<button v-on:click="box">敢死队多少人</button>-->
<!--click事件添加一个事件监听器，v-on：简写@,事件简写-->
<button @click="box">敢死队多少人</button>
<hr>
<p v-if="goods.legth==0">
没东西诶~
</p>
<template v-else>
<table border="1">
<tr>
<td>编号</td>
<td>商品名称</td>
<td>价格</td>
<td>数量</td>
<td>小计</td>
<th>操作</th>
</tr>
<tr v-for="(v1,k1) in goods">
<td>{{k1}}</td>
<td>{{v1.name}}</td>
<td>{{v1.price}}</td>
<td>
<button @click="reduce(v1)">-</button>
<input type="text" v-model="v1.number">
<button @click="plus(v1)">+</button>
</td>
<td>{{v1.price*v1.number}} </td>
<th>
<button @click="del(k1)">删除</button>
</th>
</tr>
</table>
<div>总计：{{totalPrice}}</div>
</template>
<hr>
<p class="box">后盾人</p>
<!-- 绑定用于属性 双引号""解析变量，单引号''不解析变量-->
<p :class="'box'">后盾</p>
<p :class="uu">后盾</p>
<!--表单数据的双向绑定 值为vue变量-->
<input type="text" v-model="uu">
<!--隔离符 里面只能放类名, 变量不解析，用不了属性；类名：true/false 是否使用这个类-->
<p :class="{hd:true,box:true,box1:false}">你是谁</p>
<p class="hd box"></p>
<!--数组中变量能解析，属性正常用 类名必须加上单引号才能用,否则失效-->
<p :class="[red,'box1']">你好世界</p>
<p :style="{color:color,fontSize:size+'px'}">hahahhah</p>
<hr>
<!--隔离符 变量名再值位置可解析 可能是html标签属性本身的规则 -->
<p style="color:red;font-size:10px">hahahhah</p>
<hr>
<!--prevent阻止刷新跳转的默认行为 stop阻止自身以外的冒泡，self只会阻止自身冒泡-->
<a href="http://www.baidu.com" @click.prevent="box">点我</a>
<a href="http://www.baidu.com" @click="box1">点我</a>
<div style="width: 200px;height: 200px;background: red" @click="re">
<a href="" style="display: block;width: 100px;
height: 100px;background: blue" @click.stop.prevent="blue"></a>
</div>
<hr>
<div style="width: 200px;height: 200px;background: red" @click.self="re">
<a href="" style="display: block;width: 100px;height: 100px;
background: blue" @click.prevent="blue"></a>
</div>
</div>
<script>
new Vue({
el:'#qq',
// 数据 属性
data:{
menus:[
{id:1,type:'zhu',sex:'公'},
{id:2,type:'zhu',sex:'母'},
{id:3,type:'zhu',sex:'母'},
],
num:1,
number:1,
uu:'box',
red:'box',
color:'red',
hd:'box',
size:20,
goods:[
{name:'充电宝',price:120,number:1},
{name:'山寨电风扇',price:200,number:1},
{name:'山寨手机',price:1000,number:1},
{name:'山寨老师',price:10,number:1},
]
},
// 事件
methods:{
//方法中句用 ； 分号隔开
box:function (){
// 本类数据中的num属性
this.num++
},
reduce(v1){
if(v1.number<1){
return false;
}
v1.number--;
},
plus(v1){
// 参数参与
v1.number++;
},
del(k1){
//从数组中添加/删除项目，然后返回被删除的项目。 位置，数量
this.goods.splice(k1,1);
},
blue(){
alert('blue')
},
re(){
alert('red');
},
box1() {
alert(2);
//阻止a默认跳转
event.preventDefault();
},
},
//计算 属性？
computed:{
totalPrice(){
var total=0;
//箭头函数 调用本类中的数据goods
this.goods.forEach((v1,k1)=>{
total+=v1.number*v1.price;
})
return total;
}
}
})
</script>
</body>
|