纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

Vue.set 全局操作简单示例

  2021-04-02 我要评论

本文实例讲述了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.js程序设计有所帮助

您可能感兴趣的文章:

相关文章

猜您喜欢

  • Android实现圆形渐变加载进度条

    想了解Android实现圆形渐变加载进度条的相关内容吗在本文为您仔细讲解的相关知识和一些Code实例欢迎阅读和指正我们先划重点:Android圆形渐变加载进度条,Android渐变加载进度条,Android加载进度条下面大家一起来学习吧..
  • Vue v-text指令简单使用方法示例

    想了解Vue v-text指令简单使用方法示例的相关内容吗在本文为您仔细讲解的相关知识和一些Code实例欢迎阅读和指正我们先划重点:Vue,v-text指令下面大家一起来学习吧..

网友评论

Copyright 2020 www.fresh-weather.com 【世纪下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式