目录

基本使用

在body中创建一个标签，一般使用div，定义好id后，在script中进行定义，在前台使用{{变量}}的形式进行调用，语法如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="./js/vue.js"></script>

</head>

<body>

<div id="app">

    <p>文本: {{name}}</p>

    <p>数字: {{age}}</p>

    <p>列表: {{hobby}}  需要使用索引取值: {{hobby[0]}}</p>

    <p>字典: {{game}} 方法一：使用点的方式取值{{game.name}} 方法二：使用关键字取值{{game['publish']}}</p>

    <p>超链接: {{a_url}}</p>

    <p>运算: {{10*3+4*2}}</p>

    <p>三目运算符【条件?'符合结果':'不符合结果'】:{{10>9?'大于':'小于'}}</p>

</div>

</body>

<script>

    var vm = new Vue({

        el: '#app',

        data: {

            name: 'jsd',

            age: 19,

            hobby: ['抽烟', '喝酒', '烫头'],

            game: {'name': '塞尔达传说', 'publish': '任天堂'},

            a_url:'<a href="http://www.baidu.com">点我</a>',

        }

    })

</script>

</html>

VUE插值语法的更多相关文章

  1. Vue模板语法(一)

    Vue模板语法 一.插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达 ...

  2. Vue模板语法（一）

    Vue模板语法 一 vue简介 Vue.js是一套构建用户界面的渐进式框架. 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与 ...

  3. 11 - Vue模板语法

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据. 所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML ...

  4. Vue mustache语法

    mustache语法 Vue中的插值语法mustache本意为胡子,可能是{{}}长得像胡子吧. 下面是对mustache插值语法一个最简单的使用. 被管理元素会通过data属性拿到其中的数据对象. ...

  5. 一、vue基础语法（轻松入门vue）

    轻松入门vue系列 Vue基础语法 一.HelloWord 二.MVVM设计思想 三.指令 1. v-cloak 2. v-text 3. v-html 4. v-show 4. v-pre 5. v ...

  6. Vue基础语法-数据绑定、事件处理和扩展组件等知识详解（案例分析，简单易懂，附源码）

    前言: 本篇文章主要讲解了Vue实例对象的创建.常用内置指令的使用.自定义组件的创建.生命周期(钩子函数)等.以及个人的心得体会,汇集成本篇文章,作为自己对Vue基础知识入门级的总结与笔记. 其中介绍 ...

  7. Vue 模板语法 && 数据绑定

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  8. 初始Vue、Vue模板语法、数据绑定（2022/7/3）

    文章目录 1.Vue简介 1.1.Vue的安装使用 1.2.实际的运用案例 1.3.vue开发工具的使用(这个需要在浏览器中安装) 2.初始Vue 2.1 .基础知识 2.1 .代码实例 2.2 .页 ...

  9. python 全栈开发，Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)

    一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...

  10. idea 添加 VUE 的语法支持和开发

    <一>VUE的开发分两种,一种是直接在HTML文件中使用,一种是VUE文件的形式开发 1,首先我们先让 HTML 文件支持 VUE 的语法指令提示 2,File -> Setting ...

随机推荐

  1. homework2软件方法论

    什么是软件工程方法论? 1.软件工程是一个方法论,就是我们在开始一个项目时,大体框架一定要有这么一个概念,而具体实施时,必须根据公司一些特点,优化项目开发的流程,这样才是有实效而方法论只是软件工程的结 ...

  2. Python在字典中通过键名查找键值

    def find(target, dict_data): """ :param target: 需要查找的键名 :param dict_data: 需要查找的列表 :re ...

  3. Filbeat采集nginx-ingress日志

    一.创建configmap配置文件 注:filebeat6以上版本需要将prospectors改为inputs,paths下指定的nginx-ingress日志路径匹配模式以及hosts指定的kafk ...

  4. CORS(cross origin resource sharing)

    1.什么是CORS 定义:跨域资源共享. 2.什么是跨域资源共享 允许浏览器可以从当前源服务器通过ajax访问另外一个源服务地址. 3.同源策略 是浏览器的一个安全功能,不同源的客户端脚本在没有明确的 ...

  5. 6、jmeter的配置元件：参数化--CSV文件

    1.参数化一些数据,就需要用到csv文件 Filename:文件位置和文件名 (和jmeter同一个目录就不需要写哪个盘 直接写文件名字就可以了) File  encoding:编码 Variable ...

  6. 【原创】GmSSL Android库编译

    相关内容: GmSSL Linux编译 环境搭建 重要 用编译方法2编译出的库,集成到工程之后,发现报 incompatible target错误,各种找不到定义.32位和64位都不行. 如果你也遇到 ...

  7. java注解和反射（Annotation and Reflect）

    摘要: 注解和反射是相互联系的知识,所以应该放到一起来说. 注解:JDK5之后才有的技术,为了增加对元数据的支持,可以将注解理解为代码中的特殊标记,一种修饰.而这些标记是可以在代码编译,类的加载,和运 ...

  8. FIR滤波器的设计

    FIR数字滤波器的设计 线性相位FIR滤波器的特点 单位冲激响应:\(h(n),0\leq n\leq N-1\) 系统函数:\(H(z)=\sum_{n=0}^{N-1}h(n)z^{-n}\) 零 ...

  9. fiddler动态调试js

    背景   昨天获取到的网易云音乐站点的请求内容居然是加密的, 就需要动态的调试js找出params很secSeky未加密之前的内容. 调试方法   调试之前需要在目标浏览器上部署上fiddler的根证 ...

  10. UIPath踩坑记一在浏览器控件中找不到”打开浏览器“控件

    问题:在浏览器控件中找不到"打开浏览器"控件 解决: 1.检查程序包中是否正常安装"UiPath.UiAutomation"包,如下图12.检查设计设置,是否关 ...