<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.active{
background-color: aqua;
}
.red{
color: #ff0707;
}
</style>
</head>
<body>
<!--指令-->
<div id="app">
</div>
<div class="fenge">-------------------------------</div>
<!-- 插值表达式 {{}}
支持表达式，但是不支持语句if，for，不能加到属性中
-->
<div id="chazhi">
<p>{{ niger }}</p>
<p>{{ niger.toUpperCase() }}</p>
<p>{{ niger + ' say hello' }}</p>
<p>{{ age>=18? '成年':'未成年' }}</p>
<p>{{ age2>=18? '成年':'未成年' }}</p>
<p>{{ nigers.name }}</p>
<p>{{ nigers.do }}</p>
</div>
<div class="fenge">-------------------------------</div>
<!--v-html指令-->
<div id="v_html">
<div v-html="to"></div>
<div v-html="show"></div>
</div>
<div class="fenge">-------------------------------</div>
<!--
v-show指是控制display：none
v-if就是控制该语句是否创建-->
<div id="showIf">
<div v-show="flag">show显示</div>
<div v-if="flag2">if显示</div>
</div>
<div class="fenge">-------------------------------</div>
<!--v-if和v-else和v-else-if指令-->
<div id="xuanze">
<p v-if="sex==='男'">男</p>
<p v-else="sex==='女'">女</p>
<p v-if="grade>90">成绩为A</p>
<p v-else-if="grade>80">成绩为B</p>
<p v-else-if="grade>70">成绩为C</p>
<p v-else>成绩为D</p>
</div>
<div class="fenge">-------------------------------</div>
<!--v-on增加事件指令-->
<div id="von">
<button @click="number--">--</button>
<span>{{number}}</span>
<button v-on:click="number++">++</button>
<br>
<button @click="selectTo">点击展示和隐藏</button>
<h1 v-show="check">哈哈哈哈哈哈</h1>
<br>
<button @click="buy(8)">芙蓉王8元</button>
<button @click="buy(18)">和天下18元</button>
<button @click="buy(10)">利群10元</button><br>
<span>{{money+'元'}}</span>
</div>
<div class="fenge">-------------------------------</div>
<!--v-bind设置标签属性-->
<div id="vbin">
<img :src="imgUrl2" height="150px" :title="neirong" width="200px" alt="">
<img v-bind:src="imgUrl" height="150px" width="200px" alt="">
<br><br><br>
<button v-show="index>0" @click="chage(0)">上一页</button>
<button v-show="index<list.length-1" @click="chage(1)">下一页</button><br>
<img width="200px" height="150px" :src="list[index]" alt="">
</div>
<div class="fenge">-------------------------------</div>
<!--v-for指令
基于数据多次循环
v-for="(item,index)int list"
-->
<div id="vfor">
<ul>
<li v-for="(item,index) in list2">{{item.name}}--{{index}}</li>
</ul>
<ul>
<li v-for="item in list2" :key="item.id">
<span>{{item.name}}</span>
<span>{{item.money}}</span>
<button @click="del(item.id)">delete it</button>
</li>
</ul>
</div>
<div class="fenge">-------------------------------</div>
<!--vmodel指令-->
<div id="vmodel">
<span>账户: <input type="text" v-model="username"></span><br>
<span>密码: <input type="text" v-model="password"></span><br>
<button @click="login">login</button>
<button @click="reset">reset</button>
</div>
<div class="fenge">-------------------------------</div>
<!-- 记事本 -->
<!--输入展示-->
<div id="srzs">
<input @keyup.enter="addContent" type="text" v-model="contents"><button @click="addContent">add</button>
<div v-for="(item,index) in list3" :key="item.id">
<span>{{index+1+' '}}</span>
<span>{{item.Actions}}</span>
<button @click="delOne(item.id)">delete</button>
</div>
<div v-show="list3.length>0" class="div">
<span>总计: {{list3.length}}</span>
<button @click="delAll">清空任务</button>
</div>
</div>
<div class="fenge">------------------------------------------------------------</div>
<!-- 操作类名 -->
<!--v-bind-->
<div id="vbind2">
<div v-for="(item,index) in list4">
<a href="#" :class="{active: index===acitveIndex}" @click="acitveIndex=index">{{item.name}}</a>
</div>
</div>
<div class="fenge">------------------------------------------------------------</div>
<!--v-bind操做style,进度条-->
<div id="vbind3">
<div class="fbox" :style="{backgroundColor: 'rgb(198, 143, 71)',width: '400px',height: '20px'}">
<div class="nbox" :style="{backgroundColor:'green',width: precent+'%',height:'100%'}"><span>{{precent+'%'}}</span></div>
<!-- <div class="nbox" :style="{width: precent +'%'}"> -->
</div>
<button @click="precent=25">设置为25%</button>
<button @click="precent=50">设置为50%</button>
<button @click="precent=75">设置为75%</button>
<button @click="precent=100">设置为100%</button>
</div>
<div class="fenge">-------------------------------</div>
<!--computed指令-->
<div id="computed">
<ul>
<li v-for="item in list2" :key="item.id">
<span>{{item.name}}</span>
<span>{{item.money}}</span>
</li>
<span>总钱钱：{{allMoney}}</span>
</ul>
</div>
<div class="fenge">-----------------------------</div>
<!--computed指令2-->
<div id="computed2">
<input type="text" v-model="needFen" placeholder="请输入要分解的名字">
<button @click="chageName">ok</button><br>
姓
<input type="text" v-model="firstname">
+名
<input type="text" v-model="lastname">
==
<span>{{Allname}}</span>
</div>
<div class="fenge">-------------------------------</div>
<!--计算成绩综合-->
<div id="jscj">
<input type="text"v-model="Tname" placeholder="请输入科目名"><br>
<input type="text"v-model.number="Tgrade" placeholder="请输入分数"><br>
<button @click="zengjia">增加</button>
<table>
<thead>
<th>编号</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</thead>
<tbody v-if="list5.length>0">
<tr v-for="(item,index) in list5" :key="item.id">
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td :class="{red:item.grade<60}">{{item.grade}}</td>
<td><button @click="delKemu(item.id)">删除</button></td>
</tr>
</tbody>
<tbody v-else>
<td>暂无数据！</td>
</tbody>
<tfoot v-show="list5.length>0">
<td>总分：{{AllGrade}}</td>
<td>平均分{{(AllGrade/list5.length).toFixed(2)}}</td>
</tfoot>
</table>
</div>
<div class="fenge">-------------------------------</div>
<!--watch指令-->
<div id="watch">
<input type="text" v-model="NeedFan">
<span>翻译后->{{NeedFan}}</span><br>
<input type="text" v-model="obj.NeedFan2">
<span>翻译后->{{result}}</span><br>
<select name="" id="" v-model="obj2.lang">
<option value="english" selected>英语</option>
<option value="italy">意大利语</option>
<option value="german">德语</option>
</select>
<input type="text" v-model="obj2.content2">
<span>翻译后->{{result2}}</span>
</div>
<div class="fenge">-------------------------------</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<!-- // 接口地址：https://applet-base-api-t.itheima.net/api/translate
// 请求方式：get
// 请求参数：
// （1）words：需要被翻译的文本（必传）
// （2）lang： 需要被翻译成的语言（可选）默认值-意大利
// ----------------------------------------------- -->
<script>
let app=new Vue({
el:'#app',
data:{
}
})
let watch=new Vue({
el:'#watch',
data:{
NeedFan:'',
obj:{
NeedFan2:''
},
obj2:{
content2:'消灭',
lang:''
},
result:'',
result2:'小马'
},
watch:{
NeedFan(newValue,oldValue){
console.log(newValue)
console.log(oldValue)
},
'obj.NeedFan2' (newValue){
// console.log('变化了', newValue)
//async 异步操作
//这里虽然没有定义timer，但是将timer挂载到了watch这个实例的外面
// 防抖: 延迟执行 → 干啥事先等一等，延迟一会，一段时间内没有再次触发，才执行
clearTimeout(this.timer)
this.timer = setTimeout(async () => {
const res = await axios({
url: 'https://applet-base-api-t.itheima.net/api/translate',
params: {
words: newValue
}
})
this.result = res.data.data
console.log(res.data.data)
}, 300)
},
obj2:{
deep:true,//深度监视
immediate:true,//表示一进入页面就立刻执行
handler (newValue){
clearTimeout(this.timer)
this.timer = setTimeout(async () => {
const res = await axios({
url: 'https://applet-base-api-t.itheima.net/api/translate',
params: {
words: newValue
}
})
this.result2 = res.data.data
console.log(res.data.data)
}, 300)
}
}
}
})
let jscj=new Vue({
el:'#jscj',
data:{
list5:[
{id:1,name:'体育',grade:59},
{id:2,name:'美术',grade:39},
{id:3,name:'英语',grade:69},
{id:4,name:'数学',grade:79},
{id:5,name:'语文',grade:49}
],
Tname:'',
Tgrade:'',
Avegrade:0
},
methods:{
zengjia(){
this.list5.push({
id: +new Date(),name:this.Tname,grade:this.Tgrade
})
this.Tname=''
this.Tgrade=''
},
delKemu(id){
this.list5=this.list5.filter(item =>item.id!=id)
}
},
computed:{
AllGrade:{
get(){
return this.list5.reduce((sum,item) => item.grade+sum,0)
}
}
}
})
let computed2=new Vue({
el:'#computed2',
data:{
firstname:'张',
lastname:'三',
needFen:''
},
methods:{
chageName(){
if(this.needFen.trim()=='')return;
this.Allname=this.needFen
}
},
computed:{
Allname:{
get(){
return this.firstname+''+this.lastname
},
set(value){
//这里用name作为变量就会出现问题不能展现需要的值
this.firstname=value.slice(0,1)
this.lastname=value.slice(1)
}
}
}
})
let computed=new Vue({
el:'#computed',
data:{
list2:[
{id:1,name:'芙蓉王 ',money:30},
{id:2,name:'和天下 ',money:10},
{id:3,name:'利群 ',money:16},
{id:4,name:'和气生财',money:50},
]
},
computed:{
allMoney(){
let tal=this.list2.reduce((sum,item) => sum+item.money,0)
return tal
}
}
})
let vbind3=new Vue({
el:'#vbind3',
data:{
precent:50
}
})
let vbind2=new Vue({
el:'#vbind2',
data:{
acitveIndex:1,
list4:[
{id:1,name:'芙蓉王'},
{id:2,name:'喜之郎'},
{id:3,name:'沸羊羊'},
]
}
})
let srzs=new Vue({
el:'#srzs',
data:{
contents:'',
list3:[
{id:1,Actions:'抽根芙蓉王'},
{id:2,Actions:'抽根瑞克五'},
{id:3,Actions:'抽根和天下'},
{id:4,Actions:'抽根喜之郎'},
]
},
methods:{
addContent(){
if(this.contents.trim()==''){
alert("请输入内容!")
return;
}
this.list3.unshift({
id: +new Date(),
Actions:this.contents
})
this.contents=''
},
delOne(id){
this.list3=this.list3.filter(item=> item.id!=id)
},
delAll(){
this.list3=[]
}
}
})
let vmodel=new Vue({
el:'#vmodel',
data:{
username:'',
password:''
},
methods:{
login(){
alert('username: '+this.username+'\n'+'password: '+this.password)
},
reset(){
this.username=''
this.password=''
}
}
})
let vfor=new Vue({
el:'#vfor',
data:{
list2:[
{id:1,name:'芙蓉王 ',money:'30RMB'},
{id:2,name:'和天下 ',money:'100RMB'},
{id:3,name:'利群 ',money:'16RMB'},
{id:4,name:'和气生财',money:'50RMB'},
]
},
methods:{
del(id){
this.list2=this.list2.filter(item=> item.id!=id)
}
}
})
let vbin=new Vue({
el:'#vbin',
data:{
imgUrl:'./1.jpeg',
imgUrl2:'./3.jpg',
neirong:'冬天来啦',
list:[
'./1.jpeg','./2.jpg','./3.jpg','./4.jpg'
],
index:0,
f:false,
n:true
},
methods:{
chage(uod){
if(uod===1){
this.index++
}else{
this.index--
}
}
}
})
let von=new Vue({
el:'#von',
data:{
number:1,
check:true,
money:100
},
methods:{
// 这个里面是无法直接访问这个里面的数据的
selectTo(){
von.check=!von.check
},
buy(price){
if(this.money<=price){
alert("no money you know ?")
return
}
this.money-=price
}
}
})
let xuanze=new Vue({
el:'#xuanze',
data:{
sex:'男',
grade:91
}
})
let chazhi=new Vue({
el:'#chazhi',
data:{
niger:'black man',
age:16,
age2:36,
nigers:{
name:'nicks',
do:'农活'
}
}
})
console.log(chazhi.niger);
console.log(chazhi.niger='小黑');
let v_html=new Vue({
el:'#v_html',
data:{
to:"<a href='www.baidu.com'>百度</a>",
show:"<h3>来百度"
}
})
let showIf=new Vue({
el:'#showIf',
data:{
flag:true,
flag2:true
}
})
</script>
</html>
浙公网安备 33010602011771号