<!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="../node_modules/vue/dist/vue.js"></script>
<script>
window.onload=function(){
let vm=new Vue({
el:'.main',
data:{
info:{name:'麻婆豆腐',count:1,price:22,freight:5},
total:'',
sex:'女'
},
computed:{
Freight:function(){
return this.info.count*this.info.price+this.info.freight
},
 
checkOutCom:{
get:function(){
return this.Freight
},
set:function(val){
this.sex=val
}
}
},
methods:{
checkOut(){
this.total=this.info.count*this.info.price+this.info.freight
 
},
sexShow(){
this.checkOutCom='男'
}
}
})
}
</script>
</head>
<body>
<div class="main">
王预定了
<input type="text" v-model="info.count"/>{{this.info.count}}份{{this.info.name}},运费为{{this.info.freight}}
<input type="text" v-model="info.price"/>{{this.info.price}}
<!-- <p>总价格为:{{Freight}}</p> -->
<!-- 下面为用法调用计算属性: -->
{{checkOutCom}}
 
<!-- <button @click="checkOut">结账</button>{{this.total}} -->
<!-- <button @click="sexShow">性别:</button>{{this.sex}} -->
</div>
</body>
</html>

<!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">
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
window.onload=function(){
let vm=new Vue({
el:".main",
data:{
name:'lishishi',
obj:{name:'白',age:'18'},
changeName:'',
changeObj:''
},
methods:{
actionName(n,o){
vm.changeName=o;
},
 
},
watch:{
name:'actionName',
obj:{
handler:function(n,o){
vm.changeObj=n
},
deep:false
}
}
})
}
</script>
<title>Document</title>
</head>
<body>
<div class="main">
<input type="text" v-model="name"/>{{name}}
{{changeName}}
<p>第二行</p>
<input type="text" v-model="obj.name"/>{{obj}}
{{changeObj}}
</div>
</body>
</html>

计算属性和监听,computed,watch的更多相关文章

  1. vue computed计算属性 watch监听

    计算属性 computed:{ 变量:function(){ return 计算好的值 } } 这时候计算好的值 就付给了你的变量 在实例中可以this.使用 注意 声明的变量的data中不可以重复声 ...

  2. Vue计算属性和监听属性

    一.计算属性 计算属性关键词: computed.计算属性在处理一些复杂逻辑时是很有用的. 可以看下以下反转字符串的例子: <div id="app"> {{ mess ...

  3. Vue.js之Vue计算属性、侦听器、样式绑定

    前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...

  4. vue——计算属性和侦听器

    一.计算属性(data中的相关数据) 侦听多个属性时——计算属性 comuted. 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: & ...

  5. Vue (表单、斗篷、条件、循环指令,分隔符成员、计算属性成员、属性的监听、vue组件、子组件、各个常见的钩子函数)

    表单指令 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...

  6. vue条件语句、循环语句、计算属性、侦听器监听属性

    因为 v-if 和v-for是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v-if.最终 ...

  7. 科学计算三维可视化---Traits属性的监听

    Traits属性的监听 HasTraits对象所有Traits属性都自动支持监听功能,当每个Traits属性发生变化时,HasTraits对象会通知监听此属性的函数 两种监听模式 静态监听 动态监听 ...

  8. VueJs(7)---计算属性和侦听器

    计算属性和侦听器 一. 概述 计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="exampl ...

  9. vue计算属性和侦听器

    一.计算属性: main.js: var app = new Vue({ el: '#app', data: { math: 80, physics: 90, english: 30 }, compu ...

随机推荐

  1. 时间>金钱

    时间>金钱! 如果有机会,用你的金钱去换取别人的成功经验,一定要抓住一切机会向顶尖人士学习. 仔细选择你接触的对象,因为这会节省你很多时间. 假设与一个成功者在一起,他花了10年时间成功,你跟1 ...

  2. vim配置go语法高亮

    操作系统 : CentOS7.3.1611_x64 go 版本 : go1.8.3 linux/amd64 vim版本 :version 7.4.160 vim配置go语言语法高亮的问题已经遇到过好几 ...

  3. Android ANR的产生与分析

      ANR即Application Not Responding应用无响应,一般在ANR的时候会弹出一个应用无响应对话框.也许有些开发者在使用某些手机开发中不在弹出应用无响应弹出框,特别是国产手机An ...

  4. puppeteer:官方出品的chrome浏览器自动化测试工具

    puppeteer发布应该有一段时间了,这两天正好基于该工具写了一些自动化解决方案,在这里抛砖引给大家介绍一下. 官方描述: Puppeteer is a Node library which pro ...

  5. django 查询如何使用 or

    参考:http://stackoverflow.com/questions/6567831/how-to-perform-or-condition-in-django-queryset django自 ...

  6. CentOS 7 yum nginx MySQL PHP7 简易环境搭建(精)

    用centos自带的yum源来安装nginx,mysql和php,超级方便,省去编译的麻烦,省去自己配置的麻烦,还能节省非常多的时间. 我们先把yum源换成国内的阿里云镜像源(当然不换也可以),先备份 ...

  7. Tomcat线程数与处理速度的关系

    问题:Tomcat线程数是不是越大越好呢? 答案肯定是否定的. Tomcat的处理速度跟线程数不是完全成正比的,设置不恰当会出现相反的效果.服务的负载计算包括了CPU的使用率和资源等待. 第一种情况, ...

  8. HTML5+CSS3 效果网站集合

    1.jquery插件库 HTML5制作3D樱花漫天飞舞  http://www.jq22.com/jquery-info3547 2.17素材网   http://www.17sucai.com/pi ...

  9. 如何添加使用echats地图悬浮显示内容

    /初始化绘制全国地图配置 var option = { backgroundColor: '#000', title: { text: 'Echarts3 中国地图农村金融', subtext: '三 ...

  10. SudaMod-81.0 / crDroidAndroid-8.1(android-8.1.0_r20)红米3 2018年5月3日更新

    一.写在前面 我只是个人爱好,本ROM未集成任何第三方推广软件,我只是喜欢把好的资源分享出来,若可以,我们一起学习,一起进步. 请不要问我怎么刷机! 请不要问我玩游戏卡不卡(有钱你就换好点的手机)! ...