<!doctype html>

<html lang="en">

<head id="head">

    <meta charset="UTF-8">

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

    <title>{{title}} </title>

</head>

<body>

<div id="ask"><!--vue不能控制body和html的标签-->

    <!--vue操作对象-->

    <table border="1">

        <tr>

            <th>序号</th>

            <th>属性</th>

            <th>值</th>

        </tr>

        <tbody>

            <tr v-for="(v,k,i) in list">

                <td>{{i}}</td>

                <td>{{k}}</td>

                <td>{{v}}</td>

            </tr>

        </tbody>

    </table>

    <hr>

    <!--vue操作数值-->

    <table border="1" width="100%">

        <tr v-for="v in 20">

            <td>{{v}}</td>

        </tr>

        </tbody>

    </table>

</div>

<script>

    var vue = function (options){new Vue(options)};

    vue({

        el:'#head',

        data:{

            title:'Vue v-for操作对象与数值'

        }

    });

    var app = vue({

        //element

        el:'#ask',

        data:{

            list:{

                title:'简单记录',

                url:'#',

                domain:'#'

            }

        }

    });

</script>

</body>

</html>

Vue v-for操作对象与数值的更多相关文章

  1. 018——VUE中v-for操作对象与数值

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 18.VUE学习之-v-for操作对象与数值

    一组数组时的循环 二组数组时的循环 另外可以v for 20 可以直接操作数字 <!DOCTYPE html> <html lang="en"> <h ...

  3. Vue cmd命令操作

    1.安装node(安装到电脑中,不同项目不需重复安装) 安装nodejs(如果不是在C:则需要配环境变量)2.打开cmd C:创建一个文件夹(名字不要用node) 1.进入该文件夹 2.node -v ...

  4. vue 中 直接操作 cookie 及 如何使用工具 js-cookie

    转载:https://www.cnblogs.com/xiangsj/p/9030648.html vue 中直接操作 cookie 以下3种操作方式 set: function (name, val ...

  5. jquery实现点击展开列表同时隐藏其他列表 js 对象操作 对象原型操作 把一个对象A赋值给另一个对象B 并且对象B 修改 不会影响 A对象

    这篇文章主要介绍了jquery实现点击展开列表同时隐藏其他列表的方法,涉及jquery鼠标事件及节点的遍历与属性操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jquery实现点击 ...

  6. 035——VUE中表单控件处理之使用vue控制select操作文字栏目列表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Vue2.0 【第二季】第3节 Vue.set全局操作

    目录 Vue2.0 [第二季]第3节 Vue.set全局操作 第3节:Vue.set全局操作 一.引用构造器外部数据 二.在外部改变数据的三种方法: 三.为什么要有Vue.set的存在? Vue2.0 ...

  8. 2. Vue语法--插值操作&动态绑定属性 详解

    目录 1. 设置vue模板 2. vue语法--插值操作 3. 动态绑定属性--v-bind 一. 设置vue模板 我们经常新建一个vue项目的时候, 会写如下的一段代码 <!DOCTYPE h ...

  9. for...in也反复执行语句，但它是用来操作对象的

    for...in也反复执行语句,但它是用来操作对象的

随机推荐

  1. flask中的endpoint、自定义转化器、与djnago中session区别、利用装饰器实现登录认证

    flask路由中的endpoint 与自定义转化器 ''' endpoint主要用于 反向解析, 例如:login函数中配的路由是/login,其中endpoint='lg' 则在其他函数,可以用 u ...

  2. 基于Django的Rest Framework框架的解析器

    本文目录 一 解析器的作用 二 全局使用解析器 三 局部使用解析器 四 源码分析 回到目录 一 解析器的作用 根据请求头 content-type 选择对应的解析器对请求体内容进行处理. 有appli ...

  3. VS 2017 + OpenCV + Spinnaker SDK（PointGrey） 配置

    1. OpenCV 配置 1.1 下载 opencv 源码,并将其添加至环境变量 D:\opencv4.1\build\x64\vc15\bin 注:vs2015 选 vc14,vs2017 选 vc ...

  4. ES6入门 阮一峰

    ECMAScript 6 入门 http://es6.ruanyifeng.com/#README 在线ES6转ES5 https://es6console.com/k11vgg1r/

  5. 解决ie下vue列表数据不能即时刷新的问题

    项目上要兼容IE浏览器(客户要求),发现之前在谷歌浏览器下,操作(增删改查)列表后列表能即时刷新(双向绑定),IE下却不行. 自己调试一下发现,在IE11下,如果GET请求请求相同的URL,默认会使用 ...

  6. Windows Store无法联网时安装WSL

    Windows Store无法联网时安装WSL 1 打开powershell 输入命令: Invoke-WebRequest -Uri https://aka.ms/wsl-ubuntu-1604 - ...

  7. 使用C#+Edge (Chromium)进行Web自动化测试

    今天看到了VisualStudio中现在已经自带了Web单元测试项目模板,便试了一下,发现还比较好用,它默认的是Selenium实现的,测试组在用Selenium+Python来写过自动化测试,原来它 ...

  8. go-变量

    变量使用注意事项 变量三种声明方式 var i int //使用默认值 var num = 10.2 //类型推导 num := "tom" //左侧不能同名 //多变量声明 nu ...

  9. 面试官常问的Nginx的那几个问题？

    什么是Nginx? Nginx是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器 Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代 ...

  10. 用Python复制文件的9个方法

    Python 中有许多"开盖即食"的模块(比如 os,subprocess 和 shutil)以支持文件 I/O 操作.在这篇文章中,你将会看到一些用 Python 实现文件复制的 ...