<!DOCTYPE html>
<html lang='en'>
<head>
 <meta charset='UTF-8'>
 <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 <meta name='viewport' content='width=device-width, initial-scale=1.0'>
 <script src='https://unpkg.com/vue/dist/vue.js'></script>
 <title></title>
</head>
<body>
 <div id='app'>
  <div>
    <ul>
      <li v-for="hear in hears">
      {{hear}}  
      </li>
    </ul>
    <button @click="updata">更新</button>
    <button @click="spliceHears0">操作添加</button>
    <button @click="spliceHears1">操作替换</button>
    <button @click="spliceHears2">操作删除</button>
  </div>
 </div>
 <script>
    new Vue({
      el:'#app',
      data:{
        hears:['1','2','3']
},
      methods:{
        updata(){
          this.hears=['更新后']
        },
        spliceHears0(){
          this.hears.splice(0,0,"添加")
        },
        spliceHears1(){
          this.hears.splice(0,1,"替换")
        },
        spliceHears2(){
          this.hears.splice(1,1)
        }
      }
    }
)
</script>
</body>
</html>

vue学习9-更新视图的更多相关文章

  1. vue数组操作不更新视图问题

    vue 观察数组的变异方法 更新视图 push() pop() shift() unshift() splice(i,n,arr) sort(xx) reverse() ex: app.book.pu ...

  2. day 82 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  3. day 81 Vue学习一之vue初识

      Vue学习一之vue初识   本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js ...

  4. VUE学习总结

    VUE学习总结 文档:https://cn.vuejs.org/v2/guide/ Webstorm的一些常用快捷键:1. ctrl + shift + n: 打开工程中的文件,目的是打开当前工程下任 ...

  5. vue学习之路 - 4.基本操作（下）

    vue学习之路 - 4.基本操作(下) 简述:本章节主要介绍 vue 的一些其他常用指令. Vue 指令 这里将 vue 的指令分为系统内部指令(vue 自带指令)和用户自定义指令两种. 系统内部指令 ...

  6. vue学习之深入响应式原理

    vue的响应式原理 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全 ...

  7. day 81 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  8. day 80 Vue学习一之vue初识

    Vue学习一之vue初识   本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js框架 ...

  9. Vue学习笔记-Django REST framework3后端接口API学习

    一  使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7  (Windows x86- ...

  10. Oracle 学习笔记 11 -- 视图 (VIEW)

    本次必须学习一个全新的概念-- 视图 (VIEW).在前面的笔记中曾提到过,数据对象包含:表.视图.序列.索引和同义词.前面的笔记都是对表的想剖析,那么本次笔记就对视图的世界进行深入的剖析. 视图是通 ...

随机推荐

  1. JAVA中SpringMVC获取bean方法，在工具类（utils）注入service

    有时候我们会出现无法用注解 @Autowired 注入bean的情况,这个时候可以 通过contextLoader获取 WebApplicationContext ctx = ContextLoade ...

  2. es（elasticsearch）安装IK中文分词器

    IK压缩包下载地址:https://github.com/medcl/elasticsearch-analysis-ik/releases?after=v6.7.0,需要下载对应的版本 我也上传了 h ...

  3. IDEA设置调用方法时提示方法上的注释

    IDEA设置代码注释提示,代码提示,鼠标放上面提示方法的注解信息 打开file-->setting-->Editor-->General,将Show quick documentat ...

  4. 惊！世界上竟然有O(N)时间复杂度的排序算法！计数排序！

    啥?你以为排序算法的时间复杂度最快也只能O(N*log(N))了? O(N)时间复杂度的排序算法听说过没有?计数排序!!它是世界上最快最简单的算法!!! 计数排序算法操作起来只有三步,看完秒懂! 根据 ...

  5. 【LeetCode】990. Satisfiability of Equality Equations 解题报告（C++ & python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 DFS 并查集 日期 题目地址:https://le ...

  6. 【九度OJ】题目1174：查找第K小数 解题报告

    [九度OJ]题目1174:查找第K小数 解题报告 标签(空格分隔): 九度OJ 原题地址:http://ac.jobdu.com/problem.php?pid=1174 题目描述: 查找一个数组的第 ...

  7. 【LeetCode】714. Best Time to Buy and Sell Stock with Transaction Fee 解题报告（Python & C++）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 动态规划 日期 题目地址:https://leetc ...

  8. C. Not Equal on a Segment(codeforces)

    C. Not Equal on a Segment time limit per test 1 second memory limit per test 256 megabytes input sta ...

  9. 关于wlw连接wordpress的问题

    前几天搭建好wordpress博客网站后,一直想和博客园一样,使用wlw发布文章.无奈遇到了难题,一直没有办法解决. 今天我看到一篇博客,遇到问题和我类似:尝试连接到您的日志时出错:基础连接已经关闭: ...

  10. 「算法笔记」CRT 与 exCRT

    一.扩展欧几里得 求解方程 \(ax+by=\gcd(a,b)\). int exgcd(int a,int b,int &x,int &y){ if(!b) return x=1,y ...