<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>

<body>

    <div id="app">

        <ul>

            <li v-for="item in tabs">

                {{ item.text }}

            </li>

        </ul>

    </div>

    <script type="text/javascript">

        new Vue({

            el:'#app',

            data: {

                tabs: [{

                    text:'巴士'

                },{

                    text:'快车'

                },{

                    text:'专车'

                },{

                    text:'顺风车'

                },{

                    text:'出租车'

                },{

                    text:'代驾'

                }]

            }

        })

    </script>

</body>

</html>

vue文件中挂在一个实例

vue简单实例代码的更多相关文章

  1. vue - 简单实例(vue-router + webpack + vuex)

    分享 + 实践  基于公司部分产品技术栈转型使用vue,部分同事需要学习一下,快速上手,那么我很荣幸的成为了给大家分享vue技术栈的‘ ’导师‘,在这里我分享一下: 讲解大纲为:(我是有一份PPT的, ...

  2. html5+go+websocket简单实例代码

    这次的就直接发放代码截图吧,应该是用go语言做后台一个简易的聊天,这里没用到什么特别的知识,最朴实的来实现效果,主要目的是分享下h5怎么用websocket,go搭建websocket服务的主要部分. ...

  3. .net自定义事件，经典简单实例代码

    1,新建一个控制台应用程序TestDelegate,本项目主要实现:热水器加热,报警器监控,当热水温度达到80度的时候报警器报警这样一个简单的事件处理程序 2,定义委托处理程序 public dele ...

  4. Vue 简单实用---代码可以直接用

    <!DOCTYPE html> <html> <head> <title></title> <script src="htt ...

  5. KVC/KVO简单实例代码

    Person.h #import<Foundation/Foundation.h> @classAccount; @interfacePerson :NSObject{ @private ...

  6. mysqli数据库操作简单实例

    mysqli数据库操作简单实例 代码 结果

  7. vue.js+webpack在一个简单实例中的使用过程demo

    这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...

  8. vue.js最最最最简单实例

    vue.js最最最最简单实例 一.总结 一句话总结: 1.vue.js实现实现数据的双向绑定用的是什么标记? 双大括号:比如{{message}} 2.vue数据循环输出的标记是什么? 用的是标签的v ...

  9. Vue简单基础 + 实例 及 组件通信

    vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...

随机推荐

  1. java算法02 - 树

    树是一类重要的非线性结构.而二叉树是一种比较重要的树,接下来我们来了解二叉树的相关内容. 二叉搜索树:每个节点都不比它左子树的任意元素小,而且不比它的右子树的任意元素大. /** * 二叉搜索树 O( ...

  2. DevExpress ASP.NET Core Controls 2019发展蓝图（No.2)

    本文主要为大家介绍DevExpress ASP.NET Core Controls 2019年的官方发展蓝图,更多精彩内容欢迎持续收藏关注哦~ [DevExpress ASP.NET Controls ...

  3. Excel身份证验证，身份证校验公式

    =IF(LEN(Q4)=0,"空",IF(LEN(Q4)=15,"老号",IF(LEN(Q4)<>18,"位数不对",IF(CH ...

  4. Visitor 模式心得

    最近读到Visitor模式,还是一知半解的.偶然翻到Uncle Bob对该模式的推导过程,有所心得,和大家分享一下. Uncle Bob 的链接是: http://butunclebob.com/Ar ...

  5. MySQL数据库语句

    一 . 常用mysql命令行命令        1 .启动MYSQL服务   net start mysql 停止MYSQL服务   net stop mysql 2 . netstat –na | ...

  6. Problem C: STL——Jerry的问题

    Description 最近Jerry正在刻苦的学习STL中的set的功能函数,他发现set可以用现有的函数实现并.交.差.对称差等功能,但是他没有找到怎么来比较两个集合是否相等的功能函数,所以他想自 ...

  7. Java 错误提示org.apache.poi.POIXMLException: java.lang.reflect.InvocationTargetException

    java 操作excel文件 发布后报错 org.apache.poi.POIXMLException: java.lang.reflect.InvocationTargetException XSS ...

  8. 网站优化之Apache2.4GZIP功能

    现在主流浏览器都支持资源文件压缩传输(通过设置http header的Content-Encoding=gzip). 网站优化之一就是开通服务器端的gzip功能,通过对资源文件压缩传输,加快了页面响应 ...

  9. selenium的三种等待方式

    selenium有三种等待方式 1.time.sleep() 设置等待最简单的方法就是强制等待,但一般不建议使用,可以在调试的时候进行使用 2.隐性等待 driver.implictily_wait( ...

  10. L362 When to Bring up Salary During the Job Interview Process

    Money is an awkward topic of conversation for many professionals—even more so when you’re busy tryin ...