苏飞论坛

标题: [Vue.js]学习笔记-Vue.js监听属性-watch-千米与米转换 [打印本页]
作者: 范范    时间: 2018-12-13 17:48
标题: [Vue.js]学习笔记-Vue.js监听属性-watch-千米与米转换
[Vue.js]学习笔记-Vue.js监听属性-watch-千米与米转换




导读部分

讨论区：http://www.sufeinet.com/forum-58-1.html

教程目录：http://www.sufeinet.com/thread-24026-1-1.html


教程部分

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
另： Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

Vue.js 监听属性关键词: watch。
Vue通过监听属性watch来响应数据的变化。

我们通过一下的实例， 实现千米与米之间的动态转换， 来学习watch的用法；
实例：
[HTML] 纯文本查看 复制代码
<!DOCTYPE html>

<html>

<head>

        <meta charset="utf-8">

        <title>Vue 测试实例 - 苏飞论坛(sufeinet.com)</title>

        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>

</head>

   <body>

      <div id = "computed_props">

         千米 : <input type = "text" v-model = "kilometers">

         米 : <input type = "text" v-model = "meters">

      </div>

           <p id="info"></p>

      <script type = "text/javascript">

         var vm = new Vue({

            el: '#computed_props',

            data: {

               kilometers : 0,

               meters:0

            },

            methods: {

            },

            computed :{

            },

            watch : {

               kilometers:function(val) {

                  this.kilometers = val;

                  this.meters = val * 1000;

               },

               meters : function (val) {

                  this.kilometers = val/ 1000;

                  this.meters = val;

               }

            }

         });

         // $watch 是一个实例方法

                vm.$watch('kilometers', function (newValue, oldValue) {

                        // 这个回调将在 vm.kilometers 改变后调用

                    document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;

                })

      </script>

   </body>

</html>

页面初始化运行如下：
(, 下载次数: 179)