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程序设计有所帮助。

Javascript 相关文章推荐
JavaScript初学者应注意的七个细节小结
Jan 30 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
Mar 22 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
Jun 20 Javascript
jquery实现显示已选用户
Jul 21 Javascript
jQuery中Form相关知识汇总
Jan 06 Javascript
javascript实现checkbox全选的代码
Apr 30 Javascript
实现非常简单的js双向数据绑定
Nov 06 Javascript
js 计算图片内点个数的示例代码
Apr 04 Javascript
详解vue2.0模拟后台json数据
May 16 Javascript
纯JS实现五子棋游戏
May 28 Javascript
js+css3实现简单时钟特效
Sep 13 Javascript
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
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
You might like
php mysql操作mysql_connect连接数据库实例详解
2016/12/26 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
jquery.validate分组验证代码
2011/03/17 Javascript
JavaScript基础语法让人疑惑的地方小结
2012/05/23 Javascript
基于jquery自定义图片热区效果
2012/07/21 Javascript
javascript的创建多行字符串的7种方法
2014/04/29 Javascript
JS 对java返回的json格式的数据处理方法
2016/12/05 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
2017/01/13 Javascript
jQuery实现元素的插入
2017/02/27 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
2018/09/13 Javascript
深入理解 Koa 框架中间件原理
2018/10/18 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
15分钟学会vue项目改造成SSR(小白教程)
2019/12/17 Javascript
vue element-ui实现input输入框金额数字添加千分位
2019/12/29 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
2020/04/04 jQuery
如何在JS文件中获取Vue组件
2020/09/16 Javascript
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
tornado捕获和处理404错误的方法
2014/02/26 Python
Python Sleep休眠函数使用简单实例
2015/02/02 Python
用Python计算三角函数之acos()方法的使用
2015/05/15 Python
python try 异常处理(史上最全)
2019/03/07 Python
python实现AES加密和解密
2019/03/27 Python
Python IDE Pycharm中的快捷键列表用法
2019/08/08 Python
简单几步用纯CSS3实现3D翻转效果
2019/01/17 HTML / CSS
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
旅游网创业计划书
2014/01/31 职场文书
消防战士优秀事迹材料
2014/02/13 职场文书
党性观念心得体会
2014/09/03 职场文书
医院保洁员岗位职责
2015/02/13 职场文书
大学生读书笔记大全
2015/07/01 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript
Python基础之常用库常用方法整理
2021/04/30 Python
python简单验证码识别的实现过程
2021/06/20 Python
Java使用Unsafe类的示例详解
2021/09/25 Java/Android