目录

基本使用

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="./js/vue.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10.     <p>文本: {{name}}</p>
  11.     <p>数字: {{age}}</p>
  12.     <p>列表: {{hobby}}  需要使用索引取值: {{hobby[0]}}</p>
  13.     <p>字典: {{game}} 方法一：使用点的方式取值{{game.name}} 方法二：使用关键字取值{{game['publish']}}</p>
  14.     <p>超链接: {{a_url}}</p>
  15.     <p>运算: {{10*3+4*2}}</p>
  16.     <p>三目运算符【条件?'符合结果':'不符合结果'】:{{10>9?'大于':'小于'}}</p>
  17. </div>
  18. </body>
  19. <script>
  20.     var vm = new Vue({
  21.         el: '#app',
  22.         data: {
  23.             name: 'jsd',
  24.             age: 19,
  25.             hobby: ['抽烟', '喝酒', '烫头'],
  26.             game: {'name': '塞尔达传说', 'publish': '任天堂'},
  27.             a_url:'<a href="http://www.baidu.com">点我</a>',
  28.         }
  29.     })
  30. </script>
  31. </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. qt中的一些对话框(个人备忘录)

    一.标准对话框 1.对于颜色对话框 void MyWidget::on_pushButton_clicked() { QColorDialog dialog(Qt::red,this); dialog ...

  2. Python模块——os模块详解

  3. JAVA基础Day1-注释/标识符和关键字/数据类型/类型转换/变量、常量、作用域

    目录 一.注释 二.标识符和关键字 标识符命名需要注意: 三.数据类型 基本数据类型: 拓展: 定义时需要注意: 四.类型转换 字节 五.变量.常量.作用域 变量 变量命名规范 变量作用域 常量 一. ...

  4. 美国：KDB 986446 D01已生效

    1.美国FCC认证新要求 继2022年11月25日FCC发布了FCC 22-84法规禁止授权被认为对美国国家安全构成威胁的通信和视频监控设备后,2023年1月24日FCC又发布了KDB 986446 ...

  5. C 语言 数制

    C 语言 数制 数制也称计数制,是指用一组固定的符号和统一的规则来表示数值的方法.计算机处理的信息必须转换成二进制形式数据后才能进行存储和传输.计算机中,经常使用的进制有二进制.八进制.十进制.十六进 ...

  6. JavaScript常见事件记录

    JavaScript常见事件记录 onblur: 元素失去焦点 onfocus: 元素获得焦点 onchange: 用户改变域的内容 onclick: 鼠标点击某个对象 ondblclick: 鼠标双 ...

  7. 项目：口令保管箱，批处理文件配置.bat

    #! python3 import sys import pyperclip PASSWORDS = {'email': 'F7minlBDDuvMJuxESSKHFhTxFtjVB6', 'blog ...

  8. Vue Yarn npm nodejs - 安装、配置

    一.安装 node.js 1.从node.js官网下载并安装,安装时,安装路径可以修改为非C盘 2.使用 node --version 命令在 CMD 中查看 nodejs 安装的版本,显示了安装的版 ...

  9. vue项目启动报错问题解决. Module build failed: Error: Node Sass does not yet support your current environment

    导入vue项目后,启动报错,异常如下: 1 error in ./src/pages/home.vue 2 Module build failed: Error: Node Sass does not ...

  10. 【原创】android 7.0 通知报错 java.lang.SecurityException: You need MANAGE_USERS permission to: check if specified user a managed profile outside your profile group

    项目中在后台发送通知,突然某一天测出在Android 7.0上通知发送失败,那么根据提示,我们尝试加了MANAGE_USERS权限,看起来是个系统级别权限,验证后果然无效.接着在搜索后都无果,似乎大家 ...