位置:电子教程 > Vue.JS入门教程 推荐学习资源
Vue.js入门
Vue.js 数据绑定
Vue.js中的指令
Vue.js 表单和双向数据绑定
Vue.js 条件和循环指令
Vue.js 循环语句v-for
Vue.js 样式绑定
Vue.js 事件处理器
Vue.js 监听属性
Vue.js 计算属性
Vue.js 组件 Component
Vue.js 自定义指令
Vue.js 路由
Vue.js 过渡和动画
Vue.js 响应接口
Vue.js中Ajax(Axios)
当前阅读教程:Vue.JS入门教程 > Vue.delete
阅读(22555525)      收藏       赞(5685)      分享
上一篇: Vue.set 下一篇: Vue.js中Ajax(Axios)

Vue.delete

Vue.delete 用于删除动态添加的属性 语法格式:

Vue.delete( target, key )

参数说明:

l  target: 可以是对象或数组

l  key : 可以是字符串或数字

实例

<div id = "app">
   <p style = "font-size:25px;">计数器: {{ products.id }}</p>
   <button @click = "products.id++" style = "font-size:25px;">点我</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
   el: '#app',
   data: {
      products: myproduct
   }
});
Vue.delete(myproduct, 'price');
console.log(vm);
vm.$watch('products.id', function(nval, oval) {
   alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>

以上实例中我们使用 Vue.delete 来删除 price 属性。以下是控制台输出结果:


image.png

从上图输出结果中,我们可以看到 price 属性已删除,只剩下了 id name 属性,price 属性的 get/set 方法也已删除。


上一篇: Vue.set 下一篇: Vue.js中Ajax(Axios)
QQ交流群:147415688             广告联系QQ:45157718(微信同号)