Vue中使用watch computed
watch：监听属性，来监听dta中的数据变化 或者route的变化
computed：计算属性，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue-2.4.0.js"></script>
<script src="vue-router-3.0.1.js"></script>
</head>
<body> <div class="app">
<!-- 如果不使用watch 或者计算属性，我们也可以使用事件绑定机制来引用
-->
<input type="text" v-model="fristname">
<input type="text" v-model="lastname">
<input type="text" v-model="countname"> <router-link to="/login">登录</router-link>
<router-link to="/zhuce">注册</router-link>
<router-view></router-view>
</div> <script> // 路由模板 var login={
template:"<h1>登录界面</h1>"
}
var zhuce={
template:"<h1>zhuce界面</h1>"
} // 路由实例
var router= new VueRouter({
routes:[
{path:'/',redirect:'login'},
{path:'/login',component:login},
{path:'/zhuce',component:zhuce}
] }) // vm实例
var vm=new Vue({
el:'.app',
data:{
fristname:'',
lastname:''
},
methods: { },
// 计算属性
// 在 computed 中，可以定义一些 属性，这些属性，叫做 【计算属性】， 计算属性的，本质，就是 一个方法，只不过，我们在使用 这些计算属性的时候，是把 它们的 名称，
// 直接当作 属性来使用的；并不会把 计算属性，当作方法去调用； // 注意1： 计算属性，在引用的时候，一定不要加 () 去调用，直接把它 当作 普通 属性去使用就好了；
// 注意2： 只要 计算属性，这个 function 内部，所用到的 任何 data 中的数据发送了变化，就会 立即重新计算 这个 计算属性的值
// 注意3： 计算属性的求值结果，会被缓存起来，方便下次直接使用； 如果 计算属性方法中，所以来的任何数据，都没有发生过变化，则，不会重新对 计算属性求值；
computed: {
countname:function(){
// return 是必须的参数 必须有返回值
return this.fristname+this.lastname;
}
},
// watch 监听data中的属性。
watch: {
// 当fristname 发生改变的时候，就会触发这个watch属性
// 使用这个 属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数
fristname:function(){
console.log("sdfsdfsf"); },
// 监听$route.path 属性，其中这个函数由两个参数 newval和oldval 一个是新的值，一个是旧的值
'$route.path':function(newval,oldval){
if(newval==="/login"){
console.log("欢迎进入登录界面"); }else if(newval==="/zhuce"){
console.log("欢迎进入注册界面"); } } },
router:router
}) </script>
</body>
</html>
Vue中使用watch computed的更多相关文章
- vue中methods、computed、watch区别
vue中methods.computed.watch区别methods:事件调用的钩子 computed:{ // 计算属性是根据他依赖的值计算的,当依赖值发生变化,其跟着改变 // 计算属性是依赖缓 ...
- vue中计算属性computed方法内传参
vue中computed计算属性无法直接进行传参 如果有传参数的需求比如说做数据筛选功能可以使用闭包函数(也叫匿名函数)实现 例如: 在上篇博客vue安装使用最后的成绩表练习中的过滤功能的实现: &l ...
- 浅谈Vue中计算属性computed的实现原理
虽然目前的技术栈已由Vue转到了React,但从之前使用Vue开发的多个项目实际经历来看还是非常愉悦的,Vue文档清晰规范,api设计简洁高效,对前端开发人员友好,上手快,甚至个人认为在很多场景使用V ...
- Vue中method与computed的区别
为了说明method与computed的区别,在此我想先来看看computed属性在vue官网中的说法:模板内的表达式是非常便利的,但是它们实际上只用于简单的运算.在模板中放入太多的逻辑会让模板过重且 ...
- vue中watch和computed为什么能监听到数据的改变以及不同之处
先来个流程图,水平有限,凑活看吧-_-|| 首先在创建一个Vue应用时: var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } ...
- Vue中watch与computed的区别
一. 计算属性(computed) 1.计算属性是为了模板中的表达式简洁,易维护,符合用于简单运算的设计初衷.对于运算过于复杂,冗长,且不好维护,因此我们对于复杂的运算应该 使用计算属性的方式去书写. ...
- Vue中computed，methods 和watch
Vue中的计算属性和方法属性 1.计算属性 computed 模版中可以使用表达式 <div id="example"> {{ message.split('').re ...
- 浅尝 Vue 中的 computed 属性 与 watch
对于 computed 的理解: ①.computed 用来监控自己定义的变量,该变量不在 data 里面声明,直接在 computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其 ...
- Vue中的computed属性
阅读Vue官网的过程中,对于计算属于与监听器章节的内容有点理解的不清晰:https://cn.vuejs.org/v2/guide/computed.html. 后来上网查询了资料,结合官网的说明,总 ...
随机推荐
- 数据分析入门——numpy
一.什么是numpy Numpy提供了一个在Python中做科学计算的基础库,重在数值计算,主要用于处理多维数组(矩阵)的库.用来存储和处理大型矩阵,比Python自身的嵌套列表结构要高效的多.本身是 ...
- k8s记录-使用kube-proxy让外部网络访问K8S service的ClusterIP （转载）
配置方式 kubernetes版本大于或者等于1.2时,外部网络(即非K8S集群内的网络)访问cluster IP的办法是:修改master的/etc/kubernetes/proxy,把KUBE_P ...
- *438. Find All Anagrams in a String 找到字符串中所有字母异位词
1. 原始题目 给定一个字符串 s 和一个非空字符串 p,找到 s 中所有是 p 的字母异位词的子串,返回这些子串的起始索引. 字符串只包含小写英文字母,并且字符串 s 和 p 的长度都不超过 201 ...
- SpringBoot中日志配置
背景 由于一些框架中还使用log4j-1.x系列陈旧的日志框架,调试过程中有一些错误信息不能在控制台显示,增加了调试成本.以下配置方法 将帮助你获得log4j-1.x日志在控制台显示. 解决方法: 使 ...
- AI - TensorFlow - 示例05：保存和恢复模型
保存和恢复模型(Save and restore models) 官网示例:https://www.tensorflow.org/tutorials/keras/save_and_restore_mo ...
- Selenium WebDriver原理
WebDriver原理 WebDriver是按照Server-Client的经典设计模式设计的. Server端就是RemoteServer,可以是任意的浏览器,当我们的脚本启动浏览器后,该浏览器就是 ...
- 常见的SQL注入检测语句（转载）
0x00 前言 现在很多WAF都能拦截sqlmap.havij 等注入工具的发包注入,所以这时我们需要在浏览器上使用hackerbar 进行手工注入,或者说是手工绕过注入攻击 0x01 发现SQL 注 ...
- CentOS 7/6系统升级内核版本到5.2.2
由于公司服务器新业务需要,需要将CentOS 7系统的内核(3.10.0-229)进行升级. 关于内核版本的定义:版本性质:主分支ml(mainline),稳定版(stable),长期维护版lt(lo ...
- js 上传txt格式文件
判断文件是否为.txt格式: $(".delbao .file").on("change",function(){ var acceptType = $(thi ...
- 配置MySQL，使其与PyCharm相关联
在配置MySQL和PyCharm时,经常出现这样的错误提示: Connection to base@localhost failed. [08001] Could not create connect ...