<!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. bzoj5092 分割序列

    题目链接 problem 对于一个长度为n的非负整数序列\(b_1,b_2,...,b_n\),定义这个序列的能量为:\(f(b)=\max\limits_{i=0,1,...,n}(b_1 \oti ...

  2. EF Core 3.0 Preview 9 的2个小坑

    之前我们的数据库服务器使用的是 SQL Server 2008 R2 ,由于从 EF Core 3.0 Preview 6 开始不支持 UseRowNumberForPaging ,只能停留在 EF ...

  3. Centos7 下cobbler安装及配置

    1.背景介绍 作为运维,在公司经常遇到一些机械性重复工作要做,例如:为新机器装系统,一台两台机器装系统,可以用光盘.U盘等介质安装,1小时也完成了,但是如果有成百台的服务器还要用光盘.U盘去安装,就显 ...

  4. 由浅入深，讲解 spring 实战详细使用——spring 源码篇

    首先,这篇文章不会详细的深入底层源码,只是基于注解和配置来说说我们的 spring 的使用,别小看基础,保证有你没用过的注解和配置,走起. 我们先来建立一个 maven 项目,引入 spring 文件 ...

  5. hibernate手动设置的id无效的原因与解决方法

    在使用Hibernate的过程中,发现手动设置的id(主键)无效,Hibernate仍然会在保存(调用Hibernate提供的merge()方法)的时候自动生成一个随机的id. 经过调试发现问题出在了 ...

  6. vue拖拽组件开发

    vue拖拽组件开发 创建临时vue项目 先查看node和npm版本,怎么安装就不多多bb了 再安装vue-cli npm install vue-cli -g //全局安装 vue-cli 检测是否安 ...

  7. Google浏览器出现崩溃问题解决

    更新google浏览器79版本后所有页面出现崩溃情况,在试过加no-sandbox和兼容模式之后还是不太满意,后来搜到可能是网络问题,然后打开google浏览器安装文件夹,发现chrome_proxy ...

  8. java基础第十六篇之多线程

    1:线程的概念 进程(任务):一个正在运行的程序 进程的调度:CPU来决定什么时候该运行哪个进程 (时间片轮流法) 线程在一个应用程序中,同时,有多个不同的执行路径,是进程中的实际运作单位. 好处是提 ...

  9. C# abstract 和 interface 区别

    抽象类主要用来提供多个派生类可共享的基类的公共定义,它与非抽象类的主要区别如下: 抽象类不能直接实例化. 抽象类中可能包含抽象成员,但非抽象类中不可以. 抽象类不能被密封. 接口具有以下特征 接口类类 ...

  10. js 时分秒转化为秒

    var time = '00:02:10'; var hour = time.split(':')[0]; var min = time.split(':')[1]; var sec = time.s ...