计算属性的简写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算属性的简写</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
姓名：<input type="text" v-model="name"><br>
公司：<input type="text" v-model="company"><br>
<h2>{{email}}</h2>
<h2>{{email}}</h2>
<h2>{{email}}</h2>
</div>
<script>
/*
计算属性：
多处调用只会执行一次，用方法会执行多次，使用计算属性可以提高代码运行效率。
和methods相比最大的好处是计算属性有缓存
*/
Vue.config.productionTip = false;
const vm = new Vue({
el:'#box',
data:{
name:'',
company:''
},
computed:{
email:function(){
console.log("执行")
return this.name + "@" + this.company + ".com";
}
}
})
</script>
</body>
</html>
天气案例-监视属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>监视属性</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
<!-- 不推荐 -->
<!-- <h1>今天的天气是{{isHot ? '炎热' : '凉爽'}}</h1> -->
<!-- 计算属性实现 -->
<h1>今天的天气是{{weather}}</h1>
<button type="button" @click="change">切换天气</button>
<button type="button" @click="isHot = !isHot">切换天气简洁版</button>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:'#box',
data:{
isHot:true
},
computed:{//计算属性
weather(){//属性名称
return this.isHot ? '炎热' : '凉爽';//返回值
}
},
methods:{
change(){
/* if(this.isHot){
this.isHot = false;
}else{
this.isHot = true;
} */
this.isHot = !this.isHot;
}
}
/* ,watch:{//监视属性
isHot:{//被监视的属性
handler(nv,ov){//nv 新值 ov 改之前的值
console.log("isHot被修改了");
console.log(nv,ov);
},
immediate:true//初始化就立即执行一次
}
} */
})
// 第二种监视属性打开方法
setTimeout(() =>{//5秒后开始监视
vm.$watch('isHot',{
handler(nv,ov){//nv 新值 ov 改之前的值
console.log("isHot被修改了");
console.log(nv,ov);
}
})
},5000);
</script>
</body>
</html>
深度监视
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>深度监视</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
<h1>{{number.a}}</h1>
<button type="button" @click="number.a++">number增加</button>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:'#box',
data:{
number:{
a:1,
b:5
}
}
,watch:{//监视属性
/* 'number.a':{//被监视的属性
handler(nv,ov){//nv 新值 ov 改之前的值
console.log("number被修改了");
console.log(nv,ov);
}
}, */
number:{
deep:true,//深度监视的开启，监视多级属性中所有的属性发生变化
//缺点：只能获取属性值改变之后的值，获取不了改变之前的值
handler(nv,ov){//nv 新值 ov 改之前的值
console.log("number被修改了");
console.log(nv,ov);
}
}
}
})
</script>
</body>
</html>
样式绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>样式绑定</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style type="text/css">
.ball{
width: 200px;
height: 200px;
background-color: aquamarine;
}
.ballRadius{
border-radius: 50%;
}
.ballAlign{/* 文本左右居中 */
text-align: center;
font-size: 35px;
}
.ballLine{/* 文本上下居中 */
line-height: 200px;
color: azure;
}
</style>
</head>
<body>
<div id="box">
<!-- 样式绑定第一种方式 :class 单个属性 -->
<div class="ball" :class="ballRadius">
{{ball}}
</div>
<!-- 样式绑定第二种方式 :class 数组-->
<div class="ball" :class="ballStyle">
{{ball}}
</div>
<!-- 样式绑定第三种方式 :class 对象 true 和 false 控制样式的加载和移除 -->
<div class="ball" :class="ballObj" @click="ballObj.ballRadius = !ballObj.ballRadius">
{{ball}}
</div>
<!-- 样式绑定第四种方式 :style -->
<div class="ball" :class="ballObj" :style="ballColor">
{{ball}}
</div>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:'#box',
data:{
ball:'这是一个球',
ballRadius:'ball-radius',//单样式
ballStyle:['ballRadius','ballAlign','ballLine'],//多样式
ballObj:{
ballRadius:true,
ballAlign:true,
ballLine:true
},
ballColor:{
color: 'green',
'font-size': '20px'
}
}
})
</script>
</body>
</html>
条件渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>条件渲染</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
<!-- v-show 做条件渲染 -->
<div v-show="false">第一个{{ball}}</div>
<div v-show="1===1">第二个{{ball}}</div>
<!-- v-if 做条件渲染 -->
<!-- v-if移除代码 v-show隐藏代码 -->
<div v-if="false">第三个{{ball}}</div>
<!-- 练习一 v-show 完成-->
<h1 v-show="number === 1">Angualr</h1>
<h1 v-show="number === 2">React</h1>
<h1 v-show="number === 3">Vue</h1>
<button type="button" @click="number++">切换</button>
<!-- 练习二 if 完成-->
<h1 v-if="number === 1">Angualr</h1>
<h1 v-else-if="number === 2">React</h1>
<h1 v-else-if="number === 3">Vue</h1>
<h1 v-else>都不会</h1>
<button type="button" @click="number++">切换</button>
<!--
注意：
变化频率大使用show频率小使用if if会不停在Dom中进行增删
-->
<!-- template 模板的意思，本身是不显示的，只会在渲染时起作用 -->
<!-- template 只能配合v-if使用 -->
<template v-if="number === 4">
<h1>Angualr</h1>
<h1>React</h1>
<h1>Vue</h1>
</template>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:'#box',
data:{
ball:'球',
number:1
}
})
</script>
</body>
</html>
列表渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表渲染</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
<ul>
<li v-for="u in userList">
id：{{u.id}} 姓名：{{u.name}} 年龄：{{u.age}}
</li>
</ul>
<!-- 显示序号 -->
<ul>
<li v-for="(u,index) in userList">
序号：{{index+1}} 姓名：{{u.name}} 年龄：{{u.age}}
</li>
</ul>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:'#box',
data:{
userList:[
{id:'1001',name:'张三',age:18},
{id:'1002',name:'李四',age:28},
{id:'1003',name:'王五',age:38}
]
}
})
</script>
</body>
</html>
最后修改于 2021-09-18 09:38:37
如果觉得我的文章对你有用，请随意赞赏
扫一扫支付
