编程 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 相关文章推荐

[JS源码]超长文章自动分页（客户端版）

Jan 09 Javascript

js计算两个时间之间天数差的实例代码

Nov 19 Javascript

jquery实现可关闭的倒计时广告特效代码

Sep 02 Javascript

Javascript基础_嵌入图像的简单实现

Jun 14 Javascript

js实现用户输入的小写字母自动转大写字母的方法

Jan 21 Javascript

详解AngularJS2 Http服务

Jun 26 Javascript

搭建vue开发环境

Jul 19 Javascript

webpack4+express+mongodb+vue实现增删改查的示例

Nov 08 Javascript

浅谈对于react-thunk中间件的简单理解

May 01 Javascript

js实现页面导航层级指示效果

Aug 25 Javascript

JavaScript 事件捕获冒泡与捕获详情

Nov 11 Javascript

JS前端使用canvas实现物体的点选示例

Aug 05 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