<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
1.需求:点击button标签,可以来回切换“炎热”,“寒冬”
两种写法:
插值 <h1>今日天气{{inhot ? '炎热' : '寒冬'}}</h1> 三元表达式
计算属性 info(){
return this.a ? '炎热' : '寒冷'
}
事件监控
2.需求:点击button标签,来回切换“炎热和寒冬”后,控制台打印出事件监控,点击的事件
作用:
1.监控属性变化时,回调函数自动调用(newValue,oldValue)
2.监控属性必须存在,才能进行监视
3.两种写法:(new vue时传入watch配置) (通过vm.$swatch监视)
// watch:{
// inhot:{
// immediate:true, //将默认值输出出来
// handler(newValue,oldValue) {
// console.log('值被修改了',newValue,oldValue)
// }
// },
// },
2. vm.$watch('inhot',{
immediate:true,
handler(newValue,oldValue){
console.log('打印出来值',newValue,oldValue)
}
})
-->
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="root">
<h1>今日天气{{info}}</h1>
<button @click='changeWeather'>预报</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue ({
el:'#root',
data:{
inhot:true, //开关,true,false
number:{
a:1,
b:1
}
},
computed:{
info(){
return this.inhot ? '炎热' : '寒冷'//true=炎热,false=寒冬
}
},
methods:{
changeWeather(){
this.inhot = !this.inhot//两级反转 比如当前是炎热,点击button=寒冬
}
},
watch:{
// inhot:{
// immediate:true, //将默认值输出出来
// handler(newValue,oldValue) {
// console.log('值被修改了',newValue,oldValue)
// }
// },
// 简写
// inhot:{
// handler(newValue,oldValue){
// console.log('值被修改了',newValue,oldValue)
// }
// }
},
})
// vm.$watch('inhot',{
// immediate:true,
// handler(newValue,oldValue){
// console.log('打印出来值',newValue,oldValue)
// }
// })
//简写
vm.$watch('inhot', function(newValue,oldValue){
console.log('222',newValue,oldValue)
})
</script>
</html>
天气案例(点击按钮可切换其他页面)
原创夕陌 ©著作权
文章标签 html 默认值 javascript 文章分类 运维
©著作权归作者所有:来自51CTO博客作者夕陌的原创作品,请联系作者获取转载授权,否则将追究法律责任
上一篇:数据代理
下一篇:姓名案例(插值语法)
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
有趣的css - 颜色滑动切换按钮
当鼠标悬浮在按钮上方时,按钮背景色从左往右滑动变化一个变化切换按钮。
css动画 动效设计 交互设计 用户体验 按钮 -
有趣的css - 暗黑模式切换按钮
一个丝滑的暗黑模式切换按钮。
动效设计 css动画 ux/ui 暗黑模式按钮 交互设计 -
多按钮切换页面
script type="text/javascript">function java(){ var java = document.getlementById("database"); java.style
database java div button servlet -
Javascript 切换页面 CSS 样式css i++ html javascript 网站设计
-
android 切换页面内容 安卓开发切换页面
Android开发,sdk工具箱里面,Transitions类别的控件,目前有这几个: ImageSwitcher,AdapterViewFlipper,StackView,TextSwitcher,ViewAnimator,ViewFlipper,ViewSwitcher 目前我接触到的是ViewFli
android 切换页面内容 viewflipper Android android xml -
html5切换页面 html怎么切换页面
在前端体系中,JS作为一种单线程脚本语言拥有其他编程语言通用的数据结构,数据类型,其他语言的学习者很容易迁移。CSS有其既定的规律性,尝试有规律的利用和使用,也很容易上手使用。如果你是初学者,最容易忽略的知识点反而会在HTML上堆积。 我们简单把HTML 分为HTML5之前和HTML5及之后,来整理一下看似立马能上手的HTML到底包含什么内容。一、HTMLHTML(超文本
html5切换页面 html如何跳转到另一个页面 html实体编码 html跳转到另一个html页面 js转义html的特殊字符