标签：info return 复习 温开水 isHot 笔记 weather let btn
一、原生JavaScript
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>天气案例(原生JavaScript)</title>
</head>
<body>
<div id="root">
今天天气很<h2 id="weather"></h2>
<button id="btn">切换天气</button>
</div>
<script>
let btn = document.querySelector('#btn');
let weather = document.querySelector('#weather');
let isHot = false;
weather.textContent = '凉爽';
btn.addEventListener('click',function(){
isHot = !isHot;
if(isHot){
weather.textContent = '炎热';
}
else{
weather.textContent = '凉爽';
}
})
</script>
</body>
</html>评价
总感觉很乱，感觉东西一旦多起来就会让可读性变差，感觉数据和操作是杂糅在一起的。
二、原生JavaScript改进
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>天气案例(原生JavaScript)</title>
</head>
<body>
<div id="root">
今天天气很<h2 id="weather">凉爽</h2>
<button id="btn">切换天气</button>
</div>
<script>
let btn = document.querySelector('#btn');
let weather = document.querySelector('#weather');
//闭包，写一个接口，数据和对应的数据操作
function changeWeather(){
// 数据
let weatherAtt=[
'凉爽','炎热'
];
let isHot = false;
// 数据操作
function change(){
isHot = !isHot;
if(isHot){
weather.textContent = weatherAtt[1];
}
else{
weather.textContent = weatherAtt[0];
}
}
// 完成闭包
return {change:change};
}
const changeweather = new changeWeather();
// 调用接口
btn.addEventListener('click',changeweather.change);
</script>
</body>
</html>评价
闭包，数据和对应的接口。我感觉可读性要好一点，应该就是将事件监听里的事件内容分离开来了，让事件监听函数的理解更加清晰。业务逻辑分离开来（乱说一通，(#^.^#)）。
三、使用Vue框架
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>案例</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../vuejs/vue.js"></script>
</head>
<body>
<!-- 准备容器 -->
<div id="root">
<p v-text="info"></p>
<!-- 与 <p>{{info}}</p> 一样 -->
<button @click="changeWeather">切换天气</button>
</div>
<script>
new Vue({
el:'#root',
data:{
isHot:false,
info:'凉爽',
},
methods: {
changeWeather(){
this.isHot = !this.isHot;
if(this.isHot===true){
this.info = '炎热';
// return this.info;
console.log(this.info);
}
else{
this.info = '凉爽';
// return this.info;
console.log(this.info);
}
}
},
})
</script>
</body>
</html>评价
感觉和前面JavaScript原生改进方法很相似，不过是使用了框架，自己要书写的代码更加简洁和可读性更高。不过怎么感觉有点不怎么好，就是那个data总是在变。
四、Vue改进方案一（使用计算属性）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>案例</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../vuejs/vue.js"></script>
</head>
<body>
<!-- 准备容器 -->
<div id="root">
(1)今天天气很<p v-text="info"></p>
<p>(2)今天天气很{{info}}</p>
<button @click="changeWeather">切换天气</button>
</div>
<script>
new Vue({
el:'#root',
data:{
isHot:false
},
computed:{
// 简写形式
info(){
return this.isHot?'凉爽':'炎热';
}
// 完整形式
// weather:{
// get(){
// return this.isHot?'凉爽':'炎热';
// }
// set(){
//
// }
// }
},
methods: {
changeWeather(){
this.isHot = !this.isHot;
// return this.info;
}
},
})
</script>
</body>
</html>评价
不断修改isHot的值来达到计算属性的改变，来达到模板语法的不断重新解析
标签：info,return,复习,温开水,isHot,笔记,weather,let,btn 来源： https://blog.csdn.net/qq_47286790/article/details/122789433
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。