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 相关文章推荐
用jQuery实现一些导航条切换,显示隐藏的实例代码
Jun 08 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
May 18 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 Javascript
JS+CSS3制作炫酷的弹窗效果
Nov 08 Javascript
js模态对话框使用方法详解
Feb 16 Javascript
原生javascript实现读写CSS样式的方法详解
Feb 20 Javascript
JS得到当前时间的方法示例
Mar 24 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
May 17 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
Jul 13 Javascript
简述JS控制台的使用
Jul 15 Javascript
用Vue编写抽象组件的方法
May 06 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
Nov 07 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
You might like
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
php 特殊字符处理函数
2008/09/05 PHP
Sublime里直接运行PHP配置方法
2014/11/28 PHP
WIN8.1下搭建PHP5.6环境
2015/04/29 PHP
PHP之多条件混合筛选功能的实现方法
2019/10/09 PHP
laravel 自定义常量的两种方案
2019/10/14 PHP
javascript 强制刷新页面的实现代码
2009/12/13 Javascript
js 火狐下取本地路径实现思路
2013/04/02 Javascript
用jQuery获取IE9下拉框默认值问题探讨
2013/07/22 Javascript
DIV始终居中的js代码
2014/02/17 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
JS实现的打字机效果完整实例
2016/06/20 Javascript
利用js判断手机是否安装某个app的多种方案
2017/02/13 Javascript
js实现图片左右滚动效果
2017/02/27 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
详解redux异步操作实践
2018/08/15 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
2020/02/11 Javascript
js前端对于大量数据的展示方式及处理方法
2020/12/02 Javascript
画pytorch模型图,以及参数计算的方法
2019/08/17 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
英国虚拟主机服务商:eUKhost
2016/08/16 全球购物
澳大利亚和新西兰最大的在线旅行社之一:Aunt Betty
2019/08/07 全球购物
如何保障Web服务器安全
2014/05/05 面试题
应聘医药代表职位求职信
2013/10/21 职场文书
小学教师办公室制度
2014/02/03 职场文书
幼儿园保育员责任书
2014/07/22 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
教师工作总结范文2014
2014/11/10 职场文书
天河观后感
2015/06/11 职场文书
2019大学生预备党员转正思想汇报
2019/06/21 职场文书
源码分析Redis中 set 和 sorted set 的使用方法
2022/03/22 Redis
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js
Win10开机修复磁盘错误怎么跳过?Win10关闭开机磁盘检查的方法
2022/09/23 数码科技