无涯教程网

关注我们

VueJS - 反应接口

VueJS - 反应接口

VueJS提供了向属性添加反应性的选项，这些属性是动态添加的。考虑到无涯教程已经创建了vue实例，需要添加watch属性。它可以做到如下-

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "app">
         <p style = "font-size:25px;">Counter: {{ counter }}</p>
         <button @click = "counter++" style = "font-size:25px;">Click Me</button>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#app',
            data: {
               counter: 1
            }
         });
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         });
         setTimeout(
            function(){
               vm.counter = 20;
            },2000
         );
      </script>
   </body>
</html>

在数据对象中有一个定义为1的属性计数器。当点击按钮时，计数器增加。

Vue实例已创建。要添加监视，需要执行以下操作-

vm.$watch('counter', function(nval, oval) {
   alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});

需要使用$ watch在vue实例之外添加监视。添加了一个Alert，该Alert显示counter属性的值更改。还添加了一个计时器函数，即setTimeout，它将计数器值设置为20。

setTimeout(
   function(){
      vm.counter = 20;
   },2000
);

每当更改计数器时，都会触发watch方法的Alert，如以下屏幕截图所示。

Counter

如果需要在运行时添加属性，可以使用Vue全局，Vue.set和Vue.delete方法。

Vue.set

此方法有助于在对象上设置属性。它用于解决Vue无法检测到属性添加的限制。

Vue.set( target, key, value )

target - 可以是对象或数组

key - 可以是字符串或数字

value - 可以是任何类型

来看一个例子。

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "app">
         <p style = "font-size:25px;">Counter: {{ products.id }}</p>
         <button @click = "products.id++" style = "font-size:25px;">Click Me</button>
      </div>
      <script type = "text/javascript">
         var myproduct = {"id":1, name:"book", "price":"20.00"};
         var vm = new Vue({
            el: '#app',
            data: {
               counter: 1,
               products: myproduct
            }
         });
         vm.products.qty = "1";
         console.log(vm);
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         });
      </script>
   </body>
</html>

在上面的示例中，使用以下代码在开始时创建了变量myproduct。

var myproduct = {"id":1, name:"book", "price":"20.00"};

它被赋予Vue实例中的数据对象，如下所示-

var vm = new Vue({
   el: '#app',
   data: {
      counter: 1,
      products: myproduct
   }
});

考虑一下，在创建Vue实例之后，想向myproduct数组添加一个属性。它可以做到如下-

vm.products.qty = "1";

让在控制台中查看输出。

MyProduct Array

如上所述，在产品中添加了数量。基本上增加反应性的get/set方法可用于id，名称和价格，而不适用于数量。

不能仅通过添加vue对象来实现反应性。VueJS主要希望在开始时创建其所有属性。但是，如果以后需要添加它，可以使用Vue.set。为此需要使用vue global设置它，即Vue.set。

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "app">
         <p style = "font-size:25px;">Counter: {{ products.id }}</p>
         <button @click = "products.id++" style = "font-size:25px;">Click Me</button>
      </div>
      <script type = "text/javascript">
         var myproduct = {"id":1, name:"book", "price":"20.00"};
         var vm = new Vue({
            el: '#app',
            data: {
               counter: 1,
               products: myproduct
            }
         });
         Vue.set(myproduct, 'qty', 1);
         console.log(vm);
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         });
      </script>
   </body>
</html>

无涯教程使用Vue.set通过以下代码将数量添加到数组中。

Vue.set(myproduct, 'qty', 1);

已经控制台了vue对象，下面是输出。

Products

现在，可以看到使用Vue.set添加的数量的获取/设置。

Vue.delete

此函数用于动态删除属性。

无涯教程网

Vue.delete( target, key )

target - 可以是对象或数组

key - 可以是字符串或数字

要删除任何属性，可以使用Vue.delete，如以下代码所示。

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "app">
         <p style = "font-size:25px;">Counter: {{ products.id }}</p>
         <button @click = "products.id++" style = "font-size:25px;">Click Me</button>
      </div>
      <script type = "text/javascript">
         var myproduct = {"id":1, name:"book", "price":"20.00"};
         var vm = new Vue({
            el: '#app',
            data: {
               counter: 1,
               products: myproduct
            }
         });
         Vue.delete(myproduct, 'price');
         console.log(vm);
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         });
      </script>
   </body>
</html>

在上面的示例中，使用Vue.delete通过以下代码从数组中删除了价格。

Vue.delete(myproduct, 'price');

以下是在控制台中看到的输出。

Delete

删除后，由于删除了价格，无涯教程只能看到ID和名称。还可以注意到，get/set方法已删除。

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

深入浅出区块链 -〔陈浩〕

机器学习40讲 -〔王天一〕

Linux性能优化实战 -〔倪朋飞〕

SQL必知必会 -〔陈旸〕

说透中台 -〔王健〕

OAuth 2.0实战课 -〔王新栋〕

搞定音频技术 -〔冯建元〕

快速上手C++数据结构与算法 -〔王健伟〕

结构写作力 -〔李忠秋〕

好记忆不如烂笔头。留下您的足迹吧 :)