Da
<!DOCTYPE html><html><head><meta charset="utf-8">
<title>子组件与父组件通信</title>
<script src="js/v2.6.10/vue.js"></script>
</head><body> <main id="app">
<h3>XXXX 超市</h3>
<list-goods v-for="item,index in goods"
:name='item.name'
:price='item.price'
:pic='item.pic'
:index='index'
v-on:uevent="f_disPrice" ></list-goods> <hr>
总价为: ￥ {{total}}
</main> <template id="t1"> <div>
<img :src="pic" style="width: 100px;"><br>
{{name}} <br>
￥ {{price}}<br>
<button @click="disPrice()">降价 5 元</button> </div>
</template><script>
var vm = new Vue({
el:"#app",
data:{goods:[ {"name":'西瓜',"price":100.99,"pic":"img/01.jpg"},
{"name":'××',"price":160.99,"pic":"img/01.jpg"},
{"name":'××',"price":150.99,"pic":"img/01.jpg"},
{"name":'××',"price":100.99,"pic":"img/01.jpg"},
{"name":'××',"price":0.01,"pic":"img/01.jpg"},
{"name":'××',"price":4999.99,"pic":"img/01.jpg"},
{"name":'××',"price":1588.89,"pic":"img/01.jpg"},
{"name":'××',"price":5000000.00,"pic":"img/01.jpg"} ]},
components:{ listGoods:{template:'#t1', methods:{ disPrice(){this.$emit("uevent",this.index)} },props:['name','pic','price','index'] } }, methods:{ f_disPrice(i){ this.goods[i].price -= 5;} },computed:{ total:function(){ let total=0;
this.goods.forEach(v=>total += v.price); //forEach 遍历数组 total = 0;
for(let i=0;i<this.goods.length;i++){
return total; } } })
</script></body></html>
<!DOCTYPE html><html><head><meta charset="utf-8"><title>v-model:数据双向绑定--修饰符</title>
<script src="js/v2.6.10/vue.js"></script>
</head><body> <div id="app">
姓名： <input type="text" v-model.number="user.name"><br>
邮箱： <input type="text" v-model.lazy.trim="user.email"><br>
简历： <textarea cols="30" v-model="user.resume" rows="10"></textarea><br>
性别： <input type="radio" name='r1' value='1' v-model="user.sex">男
<input type="radio" name='r1' value='2' v-model="user.sex">女<br>
爱好： <input type="checkbox" name='ch1[]' value="1" v-model='user.hobby'> 看电影
<input type="checkbox" name='ch1[]' value="2" v-model='user.hobby'> 打球
<input type="checkbox" name='ch1[]' value="3" v-model='user.hobby'> 音乐<br>
学历： <select v-model='user.education'>
<option value="1">博士</option> <option value="2">硕士</option> <option value="3">本科</option>
<option value="4">专科</option> <option value="5">其它</option> </select><br>
<input type="button" value="添加" v-on:click="add()">
<input type="button" value="删除" v-on:click="del()">
<hr>
<table border="1" width=800>
<tr><th>姓名</th><th>邮箱</th><th>简历</th><th>性别</th><th>爱好</th><th>学历</th></tr>
<tr v-for="item in userList">
<td>{{item.name}}</td><td>{{item.email}}</td><td>{{item.resume}}</td>
<td>{{item.sex}}</td><td>{{item.hobby}}</td><td>{{item.education}}</td>
</tr> </table> </div> <script>
var vm = new Vue({
el:"#app",
data:{name:"",email:"",resume:"",sex:1,hobby:[],education:'',
user:{name:"",email:"",resume:"",sex:1,hobby:[],education:''},
userList:[] },
methods:{ add:function(){ let usr = {};
usr.name=this.user.name; usr.email=this.user.email; usr.resume=this.user.resume;
usr.sex=this.user.sex; this.userList.push(usr);}, del:function(){ this.userList.pop();} } });
</script></body></html>
<!DOCTYPE html> <html><head>
<meta charset="utf-8">
<title>期末 2- 图片轮播</title>
<script src="js/v2.6.10/vue.js"></script>
<style type="text/css">
ul,li {padding:0; margin: 0; list-style: none; float: left; }
.actived { color: hotpink; font-size: 25px; }
</style></head><body> <main id = "app">
<ul>
<li><a href="" @click='pre()' style="width: 140px;">上一页</a></li>
<li v-for="index in n" style="width: 40px; float: left;">
<a :class="activeA==index?'actived':index" href="#" @click.prevent="act(index)">{{index+1}}</a>
<!-- 如果"activeA==index"条件成立返回 actived， 不满足则返回 index -->
<li><a href="" @click='next()' style="width: 140px; float: left;">下一页</a></li>
</ul> </main>
<script>
var vm = new Vue ({
el:"#app",
data:{ n:10,//页数 activeA:1, },
methods:{ pre:function(){ if(this.activeA>1) this.activeA = this.activeA-1; },
next:function(){ if(this.activeA<this.n) this.activeA = this.active+1; },
act(index){ this.activeA = index; } } })
</script></body></html>
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8">
<title>期末 1-简易计算器</title>
<script src="js/v2.6.10/vue.js"></script>
</head>main
<body>
<main id="app">
<input type="text" v-model="num1"><!-- 文本计算值 1 -->
<select v-model="op" ><!-- 计算 -->
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="num2"><!-- 文本计算值 2 -->
<button v-on:click="cal()">=</button>
<input type="text" v-model="result" readonly><!-- 计算结果并输出 -->
</main>
<script>
var vm = new Vue ({
el:"#app",
data:{ num1:0, num2:0, op:"+", result:0 },
methods:{
cal(){ switch(this.op){ case"+": this.result = parseFloat(this.num1) + parseFloat(this.num2); break;
case"-": this.result = parseFloat(this.num1) - parseFloat(this.num2); break; case"*":
this.result = parseFloat(this.num1) * parseFloat(this.num2); break; case"/": this.result = parseFloat(this.num1) / parseFloat(this.num2); break; } } } });
</script></body></html>
<html>
<head>
<title>动态组件</title>
<script src="js/v2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<p>
<input type="radio" name="tab" value="pane1" v-model="notice">充话费
<input type="radio" name="tab" value="pane2" v-model="notice">旅行
<input type="radio" name="tab" value="pane3" v-model="notice">车险
</p>
<keep-alive>
<component v-bind:is="notice"></component>
</keep-alive>
</div>
<template id="t1">
<div style="width: 200px;height:200px;border: 1px solid;">
<h3>充话费内容展示区</h3>
<input type="text" placeholder="请输入手机号">
</div> </template>
<template id="t2">
<div style="width: 200px;height:200px;border: 1px solid;">
<h3>旅行内容展示区</h3>
<input type="text" placeholder="出发城市">
</div> </template>
<template id="t3">
<div style="width: 200px;height:200px;border: 1px solid;">
<h3>车险内容展示区</h3> </div> </template>
<script>
var vm = new Vue({
el: '#app',
data: {
notice: "pane1" };
components: {
'pane1': { template: '#t1' },
'pane2': { template: '#t2' },
'pane3': { template: '#t3' }, } });
</script> </body> </html>
