1.鼠标停留显示信息
| 代码 |
html文件
<html> <head> <link rel="stylesheet" href="index.css"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app-2"> <span v-bind:title="message"> 鼠标悬停几分钟查看此处动态绑定的提示信息！ </span> </div> <script src="index.js"></script> </body> </html>
.js文件
var app2 = new Vue({ el:'#app-2', data:{ message:'页面加载于'+new Date().toLocaleString() } })
示例图
2.显示和隐藏控件
| 代码区 |
html <div id="app-3"> <p v-if="seen">现在你看到我了</p> </div> js var app3=new Vue({ el:'#app-3', data:{ seen:true } })
示例图
html <div id="app-3"> <p v-if="seen">现在你看到我了</p> </div> js var app3=new Vue({ el:'#app-3', data:{ seen:false } })
3.Vue生命周期钩子
4.计算属性
有一个缓存的情况，如果依赖的值没有发生改变，不会重新调用方法
*方法，只要页面重新渲染，方法就会再次执行
