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>
總價(jià)為: ￥ {{total}}
</main> <template id="t1"> <div>
<img?:src="pic" style="width: 100px;"><br>
{{name}} <br>
￥?{{price}}<br>
<button @click="disPrice()">降價(jià) 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 遍歷數(shù)組?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:數(shù)據(jù)雙向綁定--修飾符</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>
簡(jiǎn)歷： ?<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>
愛(ài)好： ?<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'> 音樂(lè)<br>
學(xué)歷：??<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>簡(jiǎn)歷</th><th>性別</th><th>愛(ài)好</th><th>學(xué)歷</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;">上一頁(yè)</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;">下一頁(yè)</a></li>
</ul> </main>
<script>
var?vm = new Vue ({
el:"#app",
data:{ n:10,//頁(yè)數(shù) 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-簡(jiǎn)易計(jì)算器</title>
<script?src="js/v2.6.10/vue.js"></script>
</head>main
<body>
<main id="app">
<input?type="text" v-model="num1"><!-- 文本計(jì)算值 1 -->
<select v-model="op" ><!-- 計(jì)算 ?-->
<option?value="+">+</option>
<option?value="-">-</option>
<option value="*">*</option>
<option?value="/">/</option>
</select>
<input?type="text" v-model="num2"><!-- 文本計(jì)算值 2 -->
<button v-on:click="cal()">=</button>
<input type="text" v-model="result" readonly><!-- 計(jì)算結(jié)果并輸出 ?-->
</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>動(dòng)態(tài)組件</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">充話費(fèi)
<input type="radio" name="tab" value="pane2" v-model="notice">旅行
<input type="radio" name="tab" value="pane3" v-model="notice">車險(xiǎn)
</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>充話費(fèi)內(nèi)容展示區(qū)</h3>
<input?type="text" placeholder="請(qǐng)輸入手機(jī)號(hào)">
</div>?</template>
<template id="t2">
<div style="width: 200px;height:200px;border: 1px solid;">
<h3>旅行內(nèi)容展示區(qū)</h3>
<input?type="text" placeholder="出發(fā)城市">
</div>?</template>
<template id="t3">
<div style="width: 200px;height:200px;border: 1px solid;">
<h3>車險(xiǎn)內(nèi)容展示區(qū)</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>
