<!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. svn服务器用户名密码更改后，如何更新本地用户名密码

    在提交时,IDE会给出这样的提示,说明用户名密码已更改 在命令行输入 svn ls https:XXX(项目的地址),具体步骤如下图

  2. centos使用docker安装redis ,并设置外网访问

    拉取镜像 docker pull redis:4.0 在主机/data/redis/conf目录下新建redis.conf文件vim /data/redis/conf/redis.conf # Red ...

  3. 【LeetCode】553. Optimal Division 解题报告（Python & C++）

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

  4. What is being transferred in transfer learning?

    目录 概 主要内容 feature reuse mistakes and feature similarity loss landscape module criticality pre-traine ...

  5. MongoDB基本介绍与安装（1）

    MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案. MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功 ...

  6. uniapp中拿到base64转blob对象，或base64转bytes字节数组，io操作写入字节流文件bytes

    1. uniAPP中拿到附件的base64如何操作,如word文件 /*** 实现思路:* 通过native.js的io操作创建文件,拿到平台绝对路径* 再通过原生类进行base64解码,拿到字节流b ...

  7. CS5266参数|Capstone CS5266|CS5266应用方案

    随着目前手机.笔电和平板类产品都是用的Type-C接口,特别是苹果类的笔电和平板就只有一个Type-C接口,在很多工作.学习.娱乐中突显很多不方便的情况,别是需要一些其他的功能如:鼠标键盘接口USB2 ...

  8. Java面向对象笔记 • 【第8章 内部类和泛型】

    全部章节   >>>> 本章目录 8.1 内部类 8.1.1 内部类概述 8.1.2 内部类使用 8.1.3 实践练习 8.2 静态内部类 8.2.1 静态内部类的实现 8.2 ...

  9. Kafka集群安装Version1.0.1(自带Zookeeper)

    1.说明 Kafka集群安装,基于版本1.0.1, 使用kafka_2.12-1.0.1.tgz安装包, 其中2.12是编译工具Scala的版本. 而且不需要另外安装Zookeeper服务, 使用Ka ...

  10. PHP-FPM 开启慢日志记录

    首先,找到 php-fpm 所在的目录: 使用 which php-fpm 使用 whereis php-fpm 然后找到 php-fpm.conf 所在的目录: 使用 ps -ef | grep p ...