<!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. Java连载52-单例模式的缺点以及抽象类

    一.单例模式 1.单例模式的缺点:单例模式的类型没有子类,无法被继承. 例如:下面的例子,由于父类的构造方法是私有的,所以子类中的构造方法是无法创建的,因为它是引用父类的构造方法 package co ...

  2. 《细说PHP》第四版 样章 第二章 PHP的应用与发展 2

    2.2  PHP的应用 任何一种主流的编程语言,几乎都可以开发任何类型的软件.编程语言就是一种开发工具,而选择适合的工具去做适合的事儿,才能体现其应用价值.PHP最主要的应用,就是与数据库交互来开发W ...

  3. IT兄弟连 Java语法教程 流程控制语句 循环结构语句3

    while循环 Java中的另外一种循环是while循环.while循环的语法格式如下: while(条件表达式){ 循环体; } 其中条件表达式定义了控制循环的条件,可以使任何有效的boolean表 ...

  4. 相关pycharm（进阶？）

    记录今日发现 对于pycharm细节 注意:项目的位置可以自己定 这里的新建project,建议对python.exe 文件的选择使用自己安装的位置,如下图 create,你就有了一个解释器是你自己安 ...

  5. Kettle-动态数据链接，使JOB得以复用

    动态数据连接,使JOB得以复用 背景 移动执法系统在目前的主要的部署策略为1+N的方式,即总队部署一套,地市各部署一套,且基本都在环保专网.各地市的业务数据需要推送到总队系统,以便总队系统做整体的监督 ...

  6. swoole中使用task进程异步的处理耗时任务

    我们知道,swoole中有两大进程,分别是 master 主进程和 manager 管理进程. 其中 master 主进程中会有一个主 reactor 线程和多个 reactor 线程,主要的作用就是 ...

  7. C#上手练习6（方法语句1）

    方法是将完成同一功能的内容放到一起,方便书写和调用的一种方式,也体现了面向对象语言中封装的特性. 定义方法的语法形式如下. 访问修饰符    修饰符    返回值类型    方法名(参数列表){    ...

  8. WPF MVVM,Prism,Command Binding

    1.添加引用Microsoft.Practices.Prism.Mvvm.dll,Microsoft.Practices.Prism.SharedInterfaces.dll: 2.新建文件夹,Vie ...

  9. 为什么 WPF 的 Main 方法需要标记 STAThread 。

    在编写 WPF 程序时,会发现 Main 方法上方会标记 [STAThread] . 作用:STAThread 标记主线程,也就是 UI 线程是 STA 线程模型. 1 什么是 STA ? 与 STA ...

  10. Javase之多线程（1）

    多线程(1) 多线程的概述 了解多线程之前需要先了解线程,而线程依赖于进程而存在,所以先了解进程. 什么是进程 进程就是正在运行的程序.是系统进行资源分配和调用的独立单位.每一个进程都有它自己的内存空 ...