编程 Javascript

Vue.set 全局操作简单示例

Posted in Javascript onSeptember 19, 2019

本文实例讲述了Vue.set 全局操作。分享给大家供大家参考，具体如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue.set 全局操作</title>
  <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<h1>Vue.set 全局操作</h1>
<hr>
<div id="app">
   {{count}}
  <ul>
    <li v-for="item in arr">{{item}}</li>
  </ul>
</div>
<p><button onclick="add()">Add</button></p>
</body>
</html>
<script>
  var outData={
    count:1,
     goods:'car',
    arr:[1,2,3,4]
  }
  var app = new Vue({
    el:'#app',
    data:outData,
  })
  function add(){
    // Vue.set(outData,'count',2)
    // app.count++;
   // outData.count++;
    //用下标的时候改变值的时候就不会渲染
   // app.arr[0]=4;
    //Vue提供了set 来进行渲染
    Vue.set(app.arr,1,'json')
  }
</script>

运行结果：

Vue.set 全局操作简单示例

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。

Vue.set 全局操作简单示例

- Author -

Json____

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery Ajax之load()方法

Oct 12 Javascript

使用Jquery打造最佳用户体验的登录页面的实现代码

Jul 08 Javascript

基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解

Mar 05 Javascript

JQuery跳出each循环的方法

Apr 16 Javascript

Bootstrap每天必学之基础排版

Nov 20 Javascript

Vue.js学习之过滤器详解

Jan 22 Javascript

WebSocket实现简单客服聊天系统

May 12 Javascript

使用jquery的jsonp如何发起跨域请求及其原理详解

Aug 17 jQuery

vue环境搭建简单教程

Nov 07 Javascript

Angular父组件调用子组件的方法

Apr 02 Javascript

VUE 实现滚动监听导航栏置顶的方法

Sep 11 Javascript

vue elementUI 表单校验的实现代码（多层嵌套）

Nov 06 Javascript

layui对工具条进行选择性的显示方法

Sep 19 #Javascript

基于js实现抽红包并分配代码实例

Sep 19 #Javascript

Layui table field初始化加载时进行隐藏的方法

Sep 19 #Javascript

Vue 实例事件简单示例

Sep 19 #Javascript

微信小程序常用的3种提示弹窗实现详解

Sep 19 #Javascript

微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能（函数防抖）

Sep 19 #Javascript

vue 设置 input 为不可以编辑的实现方法

Sep 19 #Javascript