- 插值
- 指令
- 过滤器
- 计算属性&监听属性
- vue购物车
1.插值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title>插值</title>
<style type="text/css">
.f30{
font-size: 30px;
}
</style>
</head>
<body>
<div id="app">
<p>文本</p>
{
{msg}}
<p>html解析</p>
<p>字体颜色变黄</p>
<b v-html="msg2"></b>
<p>字体变黄变大</p>
<b :class="msg3" v-html="msg2"></b>
<p>表达式</p>
{
{num+1}}<br />
{
{warn.substr(0,2)}}<br />
<input v-model="ok"/>
{
{ok==1?'被抓了':'有内鬼'}}
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data(){
return{
msg:'hello 小兵',
msg2:'<span style="color:yellow">hello 小兵</span>',
msg3:'f30',
num:6,
warn:'条子来了',
ok:1
};
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title>指令</title>
</head>
<body>
<div id="app">
<p>v-if/v-else-if/v-else</p>
<input v-model="score"/><br />
<b v-if="score<60">不及格</b>
<b v-else-if="score>=60 && score<70">及格</b>
<b v-else-if="score>=70 && score<80">一般</b>
<b v-else-if="score>=80 && score<90">良好</b>
<b v-else="">优秀</b>
60以下 不及格
60-70 及格
70-80 一般
80-90 良好
90-100 优秀
<p>v-show</p>
v-if与v-show的区别<br />
<b v-if="isShow">展示</b>
<b v-show="isShow">展示</b>
<p>v-for</p>
<i v-for="a in arr">{
{a}} </i>
<i v-for="i,u in users"> {
{i}}</i>
<select>
<option v-for="h in hobby" :value="h.id">{
{h.name}}</option>
</select>
<div id="" v-for="h in hobby" >
<input type="checkbox" name="hobby" :value="h.id" />{
{h.name}}
</div>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data(){
return{
score:34,
isShow:false,
arr:[1,2,3,4],
users:[{
name:'ab',id:1
},{
name:'ac',id:2
},{
name:'ad',id:3
},{
name:'ae',id:4
}],
hobby:[{
name:'保健',id:1
},{
name:'理发',id:2
},{
name:'洗头',id:3
},{
name:'养生',id:4
}]
};
}
});
</script>
</body>
</html>
3.过滤器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="date.js" type="text/javascript" charset="utf-8"></script>
<title>过滤</title>
</head>
<body>
<div id="app">
<p>局部过滤器基本应用</p>
{
{msg}}<br />
{
{msg | filterA}}
<p>局部过滤器串行使用</p>
{
{msg}}<br />
{
{msg | filterA | filterB}}
<p>局部过滤器传参</p>
{
{msg | filterC(3,10)}}<br />
<p>全局过滤器</p>
{
{time}}<br />
{
{time | fmtDateFilter}}
</div>
<script type="text/javascript">
Vue.filter('fmtDateFilter',function(value){
return fmtDate(value);
});
new Vue({
el:'#app',
filters:{
'filterA':function(v){
return v.substring(0,6);
},
'filterB':function(v){
return v.substring(2,5);
},
'filterC':function(v,begin,end){
return v.substring(begin,end);
}
},
data(){
return{
msg:'小猪同学，你的好基友被抓了',
time:new Date()
};
}
,methods:{
test(){
// 单击事件,双击事件
alert('点我试试！！');
}
}
});
</script>
</body>
</html>
4.计算属性&监听属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title>计算属性监听属性</title>
</style>
</head>
<body>
<div id="app">
<p>计算属性</p>
单价:<input v-model="price"/>
数量:<input v-model="num"/>
小计:{
{count}}
<p>监听属性</p>
千米:<input v-model="km"/><br />
米:<input v-model="m"/><br />
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data(){
return{
price:78,
num:1,
km:1,
m:1000
};
},
computed:{
count:function(){
return this.price * this.num;
}
},
watch:{
km:function(v){
// v指的是被监听的属性,是km
this.m=parseInt(v) * 1000;
},
m:function(v){
// v指的是被监听的属性,是m
this.km=parseInt(v) / 1000;
}
}
});
</script>
</body>
</html>
5.vue购物车
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title>vue购物车</title>
</head>
<body>
<div id="app">
<div v-if="cart.length==0">
<p>购物车为空</p>
</div>
<!-- //st实体，xb下标 -->
<div v-else v-for="st,xb in cart" :key="xb">
<p>名称：{
{st.name}}</p>
<p>价格：{
{st.price}}</p>
<p>数量：{
{st.num}}</p>
<p>单价：{
{st.price * st.num}}</p>
<button @click="increaseQuantity(xb)">+</button>
{
{st.num}}
<button @click="decreaseQuantity(xb)">-</button>
<button @click="removeFramCart(xb)">移除</button>
</div>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data(){
return{
cart:[
{id:1,name:'香蕉',price:10,num:1},
{id:2,name:'橘子',price:20,num:1},
{id:3,name:'西瓜',price:16,num:1},
],
};
},
methods:{
removeFramCart(xb){
this.cart.splice(xb,1);
},
increaseQuantity(xb) {
this.cart[xb].num++;
},
decreaseQuantity(xb){
if(this.cart[xb].num > 1){
this.cart[xb].num--;
}else{
removeFramCart(xb);
}
},
},
});
</script>
</body>
</html>