Vue.js学习详细课程系列--共32节（2 / 6）
Vue.js学习课程（2 / 6）
- 07. 过滤器
- 知识点
- filters
- 08. 计算属性
- 知识点
- computed
- 09. 观察属性
- 知识点
- $watch
- 10. 设定机算属性
- 知识点
- setter
- 11. Class绑定
- 知识点
- v-bind:class
- 12. Class对象绑定
- 知识点
- v-bind:class
07. 过滤器
知识点
- filters
filters
格式化变量内容的输出。（日期格式化，字母大小写，数字再计算等等）
<div id="myApp"><p>{{message}}</p><p>{{message | toupper }}</p><hr><p>现在的vue.js学习进度是{{num}}({{num | topercentage}})。</p>
</div>
<script>var myApp = new Vue({el: '#myApp',data: {message: 'hello vue.js world.',num: 0.3},filters: {toupper: function(value){return value.toUpperCase();},topercentage: function(value){return value * 100 + '%';},},});
</script>
08. 计算属性
知识点
- computed
computed
处理元数据，便于进行二次利用。（比如：消费税自动计算功能）
<div id="myApp">今年3月3日发卖的任天堂新一代主机Switch的价格是：{{price}}円，含税价格为：{{priceInTax}}円，折合人民币为：{{priceChinaRMB}}元。
</div>
<script>var myApp = new Vue({el: '#myApp',data: {price: 29980},computed: {priceInTax: function(){return this.price * 1.08;},priceChinaRMB: function(){return Math.round(this.priceInTax / 16.75);},},});
</script>
09. 观察属性
知识点
- $watch
$watch
与computed属性类似，用于观察变量的变化，然后进行相应的处理。（我从Angular而来）
<div id="myApp"><p>今年3月3日发卖的任天堂新一代主机Switch的价格是：{{price}}円，含税价格为：{{priceInTax}}円，折合人民币为：{{priceChinaRMB}}元。</p><button @click="btnClick(10000)">加价10000円</button>
</div>
<script>var myApp = new Vue({el: '#myApp',data: {price: 29980,priceInTax: 0,priceChinaRMB: 0,},watch: {price: function(newVal, oldVal){console.log(newVal, oldVal);this.priceInTax = Math.round(this.price * 1.08);this.priceChinaRMB = Math.round(this.priceInTax / 16.75);},},methods: {btnClick: function(newPrice){this.price += newPrice;},},});
</script>
10. 设定机算属性
知识点
- setter
setter
设置计算属性，同步更新元数据的值。（又是令人费解的描述）
<div id="myApp"><p>今年3月3日发卖的任天堂新一代主机Switch的价格是：{{price}}円，含税价格为：{{priceInTax}}円，折合人民币为：{{priceChinaRMB}}元。</p><button @click="btnClick(10800)">把含税改价为10800円</button>
</div>
<script>var myApp = new Vue({el: '#myApp',data: {price: 29980},computed: {priceInTax: {get:function(){return this.price * 1.08;},set: function(value){this.price = value / 1.08;}},priceChinaRMB: function(){return Math.round(this.priceInTax / 16.75);},},methods: {btnClick: function(newPrice){this.priceInTax = newPrice;},},});
</script>
11. Class绑定
知识点
- v-bind:class
v-bind:class
为html标记绑定样式单class属性。
<div id="myApp"><div v-bind:class="{active:isActive}">红色文本1</div><div :class="{active:isActive}">红色文本2</div><button @click="btnClick">改变class吧</button>
</div>
<script>var myApp = new Vue({el: '#myApp',data: {isActive: true,},methods: {btnClick: function(){this.isActive = false;},},});
</script>
12. Class对象绑定
知识点
- v-bind:class
v-bind:class
为html标记绑定样式单class对象。
<div id="myApp"><div :class="myClass">红色文本</div><button @click="btnClick">改变class吧</button>
</div>
<script>var myApp = new Vue({el: '#myApp',data: {myClass: {active: true,big: true,},},methods: {btnClick: function(){this.myClass.big = false;},},});
</script>
Vue.js学习详细课程系列--共32节（2 / 6）相关推荐
- Vue.js学习详细课程系列--共32节（1 / 6）
Vue.js学习课程(1 / 6) 01. 什么是Vue.js? 什么是Vue.js? 官方网站 竞争对手 技术前提 开发工具 02. 从index.html开始 知识点 index.html vue ...
- Vue.js学习详细课程系列--共32节（4 / 6）
Vue.js学习课程(4 / 6) 19. 表单复选框 知识点 表单复选框绑定 20. 表单单选按钮 知识点 表单单选按钮绑定 21. 表单下拉框 知识点 表单下拉框绑定 22. 表单修饰符 知识点 ...
- Vue.js学习系列七——Vue服务器渲染Nuxt学习
我又回来啦~这次我们来学习Vue的服务器渲染SSR. 关于SSR的文章网上很多,一开始看得我云里雾里.然后去Vue.js 服务器渲染指南和nuxt官网看了看,发现文章大多都是搬运官网的内容,真正讲的清 ...
- Vue.js 学习笔记 五 常用的事件修饰符
介绍几个常用的事件修饰符 直接上代码 <div id="divApp"><div class="divColor" v-on:click=&q ...
- 遇见 vue.js --------阿文的vue.js学习笔记（4）------模板语法
** 新学习新征程,我们一起踏上学习 vue.js的新长征 遇见 vue.js --------阿文的vue.js学习笔记(1)-----初识vue.js 遇见 vue.js --------阿文的v ...
- Vue.js 学习笔记 十二 Vue发起Ajax请求
首先需要导入vue-resource.js,可以自己下载引入,也可以通过Nuget下载,它依赖于Vue.js. 全局使用方式: Vue.http.get(url,[options]).then(suc ...
- Vue.js 学习笔记 十一 自定义指令
之前看到过v-bind,v-on等指令,Vue还可以自定义指<div id="divApp" <div v-focus></div> & ...
- Vue.js 学习笔记 十 自定义按键事件
<div id="divApp"><!--任何键盘动作都会触发--><input type="text" v-on:keyup=& ...
- Vue.js 学习笔记 九 v-if和v-show
<p v-if="flag">v-if</p><p v-show="flag">v-show</p> flag是 ...
最新文章
- 剑指 offer set 19 翻转单词顺序 字符串左旋
- python可视化神器_详解Python可视化神器Yellowbrick使用
- c# 按位与，按位或
- 现在的便签本都这么社会了！？重复写万次还能云端保存
- scratch跳一跳游戏脚本_cocos creator制作微信小游戏「跳一跳」
- 【 POJ - 2033 】Alphacode （dp，有坑）
- js实现给数字加三位一逗号间隔的两种方法
- Visual studio 2010 中文版安装Siverlight 5 beta tools 总结
- JAVA地址连接状态检测工具类
- keil如何下载STM32芯片F1/F4固件库
- S7-1500系统内使用ET200S 1SI模块实现Modbus 从站通信
- 四叶草启动引导配置工具 ！Clover Configurator中文版下载！
- opendrive坐标系
- 解决win10系统安装ch341驱动程序显示“预安装成功”的一个方法
- 微软Windows字体被诉侵权？我们来聊聊有关网站侵权被诉的那些事。
- es mapping 设置
- [英语语法]句法之主谓一致
- Xcode各版本和IOS模拟器个版本下载
- 提供linux下的新世纪五笔的码表和字根口诀，用于ibus。
- PCB设计中如何区分 滤波电容、去耦电容、旁路电容