<!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. TCP超时、ping不丢包排查

    现象就是:1. 每隔一段时间,问题服务器的公网地址不可访问,目前只开放了8080和22,这两个端口不可访问的时间是一致的,不可访问时间约在2分钟以内2. 已经建立的连接在不可访问期间不受影响,开的几个 ...

  2. 实体转为json的,如何处理外键情况

    实体转为json的,如何处理外键情况 jc.registerJsonValueProcessor(Userrelation.class, new JsonValueProcessor() {// 此处 ...

  3. 【LeetCode】5686. 移动所有球到每个盒子所需的最小操作数 Minimum Number of Operations to Move All Balls to Each Box

    作者: 负雪明烛 id: fuxuemingzhu 公众号:负雪明烛 本文关键词:LeetCode,力扣,算法,算法题,交替合并字符串,Merge Strings Alternately,刷题群 目录 ...

  4. 【LeetCode】147. Insertion Sort List 解题报告（Python）

    [LeetCode]147. Insertion Sort List 解题报告(Python) 标签(空格分隔): LeetCode 作者: 负雪明烛 id: fuxuemingzhu 个人博客: h ...

  5. 【LeetCode】228. Summary Ranges 解题报告（Python）

    [LeetCode]228. Summary Ranges 解题报告(Python) 标签(空格分隔): LeetCode 题目地址:https://leetcode.com/problems/sum ...

  6. 移动端H5-iPhone安全距离适配

    安全区域? 安全区域指的是一个可视窗口范围,处于安全区域的内容不受圆角(corners).齐刘海(sensor housing).小黑条(Home Indicator)影响,如下图蓝色区域: 也就是说 ...

  7. ADVERSARIAL EXAMPLES IN THE PHYSICAL WORLD

    目录 概 主要内容 least likely class adv. 实验1 l.l.c. adv.的效用 实验二 Alexey Kurakin, Ian J. Goodfellow, Samy Ben ...

  8. [opencv]使用g++编译opencv程序演示

    gcc/g++ 编译命令 1. gcc -E source_file.c -E,只执行到预编译.直接输出预编译结果. 2. gcc -S source_file.c  -S,只执行到源代码到汇编代码的 ...

  9. Spring企业级程序设计 • 【第1章 Spring之旅】

    全部章节   >>>> 本章目录 1.1 Spring框架基础 1.1.1 Spring特点及体系结构 1.1.1 Spring的体系结构 1.1.2  使用Eclipse搭建 ...

  10. Ranger-Kylin插件安装

    Ranger-Kylin插件安装, 从Ranger1.1.0版本开始支持Ranger Kylin插件, 从Kylin2.3.0版本开始支持Ranger Kylin插件的权限控制. 1.获取安装包 sc ...