<!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. vnc mirror driver

    2012年4月,大二下学期,平静的课堂上老师通知了一个比赛...第一届大学生软件设计大赛!然后我选了第六题:windows屏幕录像.就这样我就开始了我的vc开发生涯. 之前学了c/c++作为基础,自认 ...

  2. .net Core 使用 iTextSharp 生成PDF 简单示例

    在 Nuget 中导入需要的插件: 实现的代码: 1 [HttpGet, Route("CreatePdf")] 2 public Response CreatePdf() 3 { ...

  3. shell脚本报错：.sh: /bin/bash^M: 坏的解释器: 没有那个文件或目录

    .sh: /bin/bash^M: 坏的解释器: 没有那个文件或目录 这是因为shell脚本是Windows下编辑的 格式不一样 执行 sed -i 's/\r$//' 脚本名称.sh

  4. centos安装宝塔命令

    yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh & ...

  5. tomcat 增加内存

    打开tomcat目录的bin/catalina.bat文件,在开头处,增加: SET CATALINA_OPTS= -Xms2048m -Xmx4096m -XX:MaxNewSize=512m -X ...

  6. nim_duilib（1）之第一个dui executable(including configure setting in vs2017)

    before starting clone nim_duilib: https://github.com/netease-im/NIM_Duilib_Framework 迁出github的源码即可. ...

  7. 【LeetCode】1160. Find Words That Can Be Formed by Characters 解题报告(C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 字典统计 日期 题目地址:https://leetco ...

  8. 【九度OJ】题目1056：最大公约数 解题报告

    [九度OJ]题目1056:最大公约数 解题报告 标签(空格分隔): 九度OJ 原题地址:http://ac.jobdu.com/problem.php?pid=1056 题目描述: 输入两个正整数,求 ...

  9. 【C++】指针初始化

    1.Node * p:if(p)//报错 2.Node * p=NULL;if(p)//不报错 注意把指针初始化,否则指针将指向任意位置

  10. 'real'词频分析

    写下来想法来自于无聊时写的代码.https://cryptopals.com/sets/1/challenges/3 The hex encoded string: 1b37373331363f781 ...