VUE插值语法
基本使用
在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插值语法的更多相关文章
- Vue模板语法(一)
Vue模板语法 一.插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达 ...
- Vue模板语法（一）
Vue模板语法 一 vue简介 Vue.js是一套构建用户界面的渐进式框架. 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与 ...
- 11 - Vue模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据. 所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML ...
- Vue mustache语法
mustache语法 Vue中的插值语法mustache本意为胡子,可能是{{}}长得像胡子吧. 下面是对mustache插值语法一个最简单的使用. 被管理元素会通过data属性拿到其中的数据对象. ...
- 一、vue基础语法（轻松入门vue）
轻松入门vue系列 Vue基础语法 一.HelloWord 二.MVVM设计思想 三.指令 1. v-cloak 2. v-text 3. v-html 4. v-show 4. v-pre 5. v ...
- Vue基础语法-数据绑定、事件处理和扩展组件等知识详解（案例分析，简单易懂，附源码）
前言: 本篇文章主要讲解了Vue实例对象的创建.常用内置指令的使用.自定义组件的创建.生命周期(钩子函数)等.以及个人的心得体会,汇集成本篇文章,作为自己对Vue基础知识入门级的总结与笔记. 其中介绍 ...
- Vue 模板语法 && 数据绑定
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- 初始Vue、Vue模板语法、数据绑定（2022/7/3）
文章目录 1.Vue简介 1.1.Vue的安装使用 1.2.实际的运用案例 1.3.vue开发工具的使用(这个需要在浏览器中安装) 2.初始Vue 2.1 .基础知识 2.1 .代码实例 2.2 .页 ...
- 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 ...
- idea 添加 VUE 的语法支持和开发
<一>VUE的开发分两种,一种是直接在HTML文件中使用,一种是VUE文件的形式开发 1,首先我们先让 HTML 文件支持 VUE 的语法指令提示 2,File -> Setting ...
随机推荐
- hdu4585 Treap与名次树/STL map(C/C++)
hdu4585 题目地址:https://acm.dingbacode.com/showproblem.php?pid=4585 Shaolin Time Limit: 3000/1000 MS (J ...
- 2023.1.21 app后端pyinstaller启动
1.打包后会在dist文件夹中暂时生成一个新的文件目录,点击app.exe后也是在这个暂时的文件目录下读取文件的,所以需要以下代码拷贝添加原始项目中的文件 pyinstaller -D app.py ...
- 基础篇二：Linux常用系统命令
Linux常用系统命令 pwd 打印当前目录 cd /目录 切换目录 cd .. 切换上一级目录 ls 显示目录 ls -a 包括隐藏文件 ls -l 以长格式列出 alias 当前系统所有别名 ...
- OO_Lab0总结博客
OO_Lab0 问题描述 对表达式结构进行建模,将表达式中非必要的括号进行展开并化简. 设定的形式化表述(仅写出部分): 表达式 \(\rightarrow\) 空白项 [加减 空白项] 项 空白项 ...
- printf( )和scanf( )
printf()的转换说明 转换说明 输出 %a,%A 浮点数,十六进制数和p记数法 %c 单个字符 %d.%i 有符号的十进制整数 %e,%E 浮点数,e记数法 %f 浮点数,十进制计数法 %g/% ...
- 1009.Django模型基础04
一.数据库数据渲染到模板 二.案例的功能介绍 博客小案例功能介绍: 主页index.html--------------> 展示添加博客和博客列表的文字,实现页面跳转 添加页add.html-- ...
- 持续集成环境(6)-Tomcat安装和配置(编写中)
安装Tomcat8.5 把Tomcat压缩包上传到tomcat服务器(tomcat专用服务测试服务器.生产服务器) yum install java-1.8.0-openjdk* -y wget ht ...
- vue +iview Select省市区联动
因为需要保存的表里只有City_id一个字段,所以这边只保存"区"的值 <Row type="flex" justify="start" ...
- 查看Linux内存占用情况
参考链接: 查看Linux磁盘及内存占用情况 linux的top命令参数详解 1.ps ps aux --sort -rss a 显示所有终端机下执行的进程,包括其他用户的进程(有的进程没有终 ...
- win 11 VMware workstations b不可恢复的错误（vcpu-2）
首先检查一下电脑有没有开启CPU虚拟化,我的已经开启了,按照百度的方法去控制面板卸载程序里面,找到VMware 右击更改 弹出的安装程序点修复,,结果修复出错了,显示写入文件D:\vm\glib-2. ...