<!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. BZOJ1001/LG4001 「ICPC Beijing2006」狼抓兔子 平面图最小割转对偶图最短路

    问题描述 BZOJ1001 LG4001 题解 平面图最小割=对偶图最短路 假设起点和终点间有和其他边都不相交的一条虚边. 如图,平面图的若干条边将一个平面划分为若干个图形,每个图形就是对偶图中的一个 ...

  2. Java多态的总结

    多态 多态是一个对象具有不同表现形态或形式的能力,根据不同的实例执行不同的操作,例如打印机具有打印功能,打印机又有彩色打印机和黑白打印机,彩色打印机的实例打印出来的是彩色,黑白打印机打印出来的是黑色, ...

  3. Linux设备树文件结构与解析深度分析

    Copy from :https://blog.csdn.net/woyimibayi/article/details/77574736 正文开始 1. Device Tree简介 设备树就是描述单板 ...

  4. AJAX 实现form表单提交

    1.使用Ajax实现异步操作,点击登录按钮后,即触发form表单的提交事件,数据传输至后端 JSP: <script type="text/javascript" src=& ...

  5. 《Java面试全解析》505道面试题详解

    <Java面试全解析>是我在 GitChat 发布的一门电子书,全书总共有 15 万字和 505 道 Java 面试题解析,目前来说应该是最实用和最全的 Java 面试题解析了. 我本人是 ...

  6. Python程序中的进程操作-进程间数据共享(multiprocess.Manager)

    目录 一.进程之间的数据共享 1.1 Manager模块介绍 1.2 Manager例子 一.进程之间的数据共享 展望未来,基于消息传递的并发编程是大势所趋 即便是使用线程,推荐做法也是将程序设计为大 ...

  7. golang数据结构之稀疏数组

    掌握知识: 数组的初始化和赋值 结构体的初始化和赋值 字符串和整型之间的转换以及其它的一些操作 类型断言 读取文件 写入文件 对稀疏数组进行压缩 package main import ( " ...

  8. 1+x证书web前端开发jquery专项练习测试题

    javascript程序设计-题库 1.下面哪一种不属于Jquery的选择器? A. 基本选择器 B. 层次选择器 C. 表单选择器 D. 节点选择器 答案: D 2.如果需要匹配包含文本的元素,用下 ...

  9. IT兄弟连 Java语法教程 流程控制语句 分支结构语句2

    2  if-else条件语句 if-else语句的完整形式如下: if(判断条件){ A代码块(判断条件的值为true,执行) }else{ B代码块(判断条件的值为false,执行) } 当然,如果 ...

  10. mysql多表关联update

    日常的开发中一般都是写的单表update语句,很少写多表关联的update. 不同于SQL Server,在MySQL中,update的多表连接更新和select的多表连接查询在使用的方法上存在一些小 ...