简单vue的监听属性(单位换算)

最新推荐文章于 2023-07-24 16:49:25 发布
最新推荐文章于 2023-07-24 16:49:25 发布
阅读量454 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/sunzhiqi/p/10077385.html
版权

单位换算

单位换算可以根据实际情况换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js的监听属性</title>
    <script type="text/javascript" src='./js/vue.js'></script>
    <script type="text/javascript">
    window.onload = function(){

        //建立vue对象

        var app = new Vue({

            el:"#a",
            data:{
                kilometers:0,
                meters:0,
                decimetre:0
            },
            //监听属性开始
            watch:{
                kilometers:function(val){
                    this.kilometers = val;
                    this.decimetre = val * 10000;
                    this.meters = val * 1000;

                },
                meters:function(val){
                    this.kilometers = val / 1000;
                    this.decimetre = val * 10;
                    this.meters=val;
                },
                decimetre:function(val){
                    this.kilometers = val /10000;
                    this.meters = val / 10;
                    this.decimetre = val;
                }
            }
        });

    }
    </script>

</head>
<body>
    <div id="a">
    千米： <input type="text" v-model = "kilometers"/><br/>
    米：    <input type="text" v-model = "meters"/><br/>
    分米： <input type="text" v-model = "decimetre"/><br/>

    </div>


    
</body>
</html>

 

转载于:https://www.cnblogs.com/sunzhiqi/p/10077385.html

weixin_30500105
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用Vue.js实现监听属性的变化
11-26
创建 Vue 实例时，Vue 将遍历 data 的属性，通过 ES5 的 Object.defineProperty 将它们转为 getter/setter，在其内部 Vue 可以追踪依赖、通知变化。 const vm = new Vue({ data: {foo: 1} // 'vm.foo' (在内部，同...
vue监听对象及对象属性问题
12-04
监听整个对象，使用watch就行 export default { data() { return { a: { b: 1, c: 2 } } ... console.log('监听a整个对象的变化...监听对象中具体属性的变化，需要使用watch配合computed export default { data
vue单位换算
qq_57218752的博客
09-07 752
玩玩
vue应用实例 单位换算（简仿百度单位换算网页工具）
dyh111的博客
08-26 2348
一、效果图 废话不多说先上效果图： 1、这是百度的 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190826110114230.png) 2、这是我的 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190826110241909.png) （好吧，自惭形愧，还是差很多的！） 二、关键代码 1、html <di...
Vue.js 极简小例：数值计算、千米换算为米、九九乘法表、循环
愿我如星君如月 ... 夜夜流光相皎洁 ...
11-19 2709
代码： &lt;template&gt; &lt;div id="app"&gt; &lt;!-- 千米和米换算 --&gt; &lt;div id = "computed_props"&gt; &lt;input type = "text" v-model = "kilometers"&gt; 千米=
vue自适应单位换算
weixin_42711805的博客
07-22 1100
module.exports = { plugins: { autoprefixer: {}, "postcss-px-to-viewport": { // 视窗的宽度，对应的是我们设计稿的宽度 viewportWidth: 375, // 指定`px`转换为视窗单位值的小数位数 unitPrecision: 6, // 指定需要转换成的视窗单位，建议使用vw viewportUnit: "vw", /.
vue+element单位换算，分换算为元
m0_52263688的博客
09-22 1453
有时候我们开发的时候，关联到价钱的数值，我们后端统一返回分为单位的数据。我们需要自己转换下 //分转换成元 conversion = (num: number) => { const str = num / 100 + ""; const intSum = str .substring(0, str.indexOf(".")) .replace(/\B(?=(?:\d{3})+$)/g, ","); //取到整数部分 const dot = str
Vue2 监听属性改变watch的实例代码
12-29
效果： 代码： 幼儿园入学年龄（3～6）：</label><input type=number v-model=child.age> <button @click=older>... var app = new Vue({ el:#app2, data:{ child:{age:2}, hasErr:fals
详解vue2.0监听属性的使用心得及搭配计算属性的使用
01-19
我们在工作中常常需要监听某一个属性值的变化，这个时候我们就需要用到了监听属性watch，在这里我总结watch属性的三种场景使用希望对你有所帮助： 1.基础版监听： 场景如下：输入框输入你的年龄，如果年龄在0-15岁...
vue小例子-单位换算-父子组件通信
专注微信小程序
03-08 603
写了差不多三小时，还好，没出什么大bug,基本实现了单位换算，大问题没有，小问题不管。 和前面的例子一样，直接全部复制保存成html页面，就能打开 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>单位换算</title> <style> table{ border:
vue将大数字单位转化成 万、亿
weixin_48854245的博客
01-13 3094
//将超过万/亿的数字加上万/亿的单位 getNum() { for (let i of this.paymentDiv) { //math.floor 就是去除小数点向下取整 math.floor(3.84) = 3 //x.toString() 就是把x变成字符串 let num1 = Math.floor(i.today).toString(); //如果num1长度大于4(num1是万级别的) if.
vue js工具类 —— 人民币大写转换（带负数）
嘀嘀嘀
07-05 449
vue js工具类 —— 人民币大写转换（带负数） 废话不多说上代码： class RMBConverter { static numberToChinese(money) { // 汉字的数字 const cnNums = ['零', '壹','贰','叁','肆','伍', '陆','柒','捌','玖',] // 基本单位 const cnIntRadice = ['', '拾', '佰', '仟'] // 对应整数部分扩展单位 const cn
Vue利用计算属性和侦听属性实现简易计算器
qq_34466755的博客
06-24 1811
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="./js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="js/vue-router.js" type="text/javascript
bit Byte KB MB GB TB 单位换算
weixin_30587025的博客
06-21 345
1TB = 1024G 1G = 1024M 1M = 1024K 1K = 1024 byte 1 byte = 8 bit 转载于:https://www.cnblogs.com/cnundefined/p/7060605.html
vue实现简易计算器的四种方法
m0_67477217的博客
04-01 2611
这些方法都是基于Vue.js框架实现的，并且都能够实现计算器应用程序的功能。具体选择哪种方法取决于个人喜好和项目需求。计算属性适用于简单的计算，而监视器函数和方法的组合可以处理更加复杂的计算。
vue学习笔记三（监听和事件处理小案例）
清风无虑skr的博客
06-13 407
vue监听watch Vue.js 监听属性 watch，可以通过 watch 来响应数据的变化,使用这个属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数 案例一：实现加减乘除计算器功能 在第一个表单中输入数字，然后通过下拉列表选择要进行的运算，然后再第二个表单中输入数字后，结果便会自动显示再最后一个表单中 <!DOCTYPE html> <html> <head> <meta charset="ut
Vue中将以毫米（mm）为单位的数值转换为像素（px）
最新发布
beyond520lin的博客
07-24 1327
1. 首先，需要确定当前屏幕的像素密度（pixel density）。常见的像素密度是每英寸像素数（PPI）为 96。可以根据实际情况进行调整。所以，在Vue中将毫米转换为像素，可以使用上述公式进行计算。将这个转换过程封装成一个Vue过滤器或者自定义方法，以便在模板中直接调用和使用。在Vue中将以毫米（mm）为单位的数值转换为像素（px），可以使用CSS中的转换函数。
vue-js实现日期加减，年月日，及单位换算。
CCKing7的博客
12-23 8815
1.点击年份加一 2.点击年份减一 3.点击月份加一 4.点击月份减一 5.点击天数加一 6.点击天数减一
Vue移动端 / PC端适配解决方案：postcss-px-to-viewport
米斯特曹
08-09 3982
本文介绍一款移动端 / PC端非常不错的适配解决方案：postcss-px-to-viewport 【进入官网】 在此之前为解决适配问题“普遍”会给html根节点设置font-size来计算单位值，兼容多端适配问题。开发者需要实时换算单位、还需要精确到六七位小数点。这样的解决方案在现在看来似乎不是最简洁高效的方案。 希望有这样一种方案： 首先、不论转换是否方便，我就是不想在开发代码的时候换算这些单位，更不想去操心什么转换系数（根节点单位） 我会考虑某些属性不需要转换为REM、VW等，如果统一...
vue 监听属性改变
06-01
在 Vue 中，可以使用 `watch` 属性监听属性改变。具体的做法是在 Vue 实例中添加 `watch` 属性，然后指定需要监听的属性和回调函数。例如，监听 `name` 属性的改变，可以这样写： ``` watch: { name: function...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值