vue基础语法之插值表达式详解
作者:泽哥ins 发布时间:2024-05-10 14:10:48
一、vscode插件介绍
在我们演示插值表达式之前,我们先安装这一个VScode给我们提供的插件,它可以将我们书写好的网页通过服务端口的方式进行访问,同时它的好处还有:再修改代码后,不需要我们手动点击刷新,插件会帮我们自动进行刷新,是不是非常方便,提高了我们的开发效率,节省了我们每次修改代码都要点击一次刷新的操作。
安装步骤如下图所示:安装Live Server插件
我们安装完插件以后,重启VScode编辑器,然后可以再一个html页面中,右键,选择open with Live Server选项,进行打开。也可以使用快捷键:alt+L然后再按alt+o,即可通过我们安装的插件的方式再浏览器中打开。
打开后我们可以再地址栏中看到127.0.0.1:5500的这个端口方式打开的浏览器。
二、插值表达式介绍
挂载元素可以使用 Vue.js 的模板语法,模板中可以通过插值表达式为元素进行动态内容设置,写法为 {{ }}。
三、插值表达式示例1
我们可以再挂载元素的内部的插值表达式中,书写算数运算,它会帮我们进行自动运算结果。
我们先来演示一下,没有进行vue挂载元素,我们直接使用插值表达式,然后再浏览器中运行。
<body> <div id="app"> <ul> <li>计算结果为: {{ 1 + 2 + 3 }}</li> </ul> </div> <script src="js/vue-2.6.14.js"></script> <script> </script></body><body>
<div id="app">
<ul>
<li>计算结果为: {{ 1 + 2 + 3 }}</li>
</ul>
</div>
<script src="js/vue-2.6.14.js"></script>
<script>
</script>
</body>
发现运行后的结果并没有帮我们计算结果,而是将我们再标签元素中书写的内容直接当普通文本的形式给我们展示出来的。
四、插值表达式示例2
vue挂载元素后,我们再使用插值表达式,然后再浏览器中运行。
<body>
<div id="app">
<ul>
<li>计算结果为: {{ 1 + 2 + 3 }}</li>
</ul>
</div>
<script src="js/vue-2.6.14.js"></script>
<script>
new Vue({
el:'#app'
})
</script>
</body>
通过运行我们发现,我们的计算结果显示出来啦!这就说明数学计算功能是我们vue的插值表达式的功能,如果我们没有进行指定挂载元素,那么就相当于没有使用vue的功能,我们显示的效果就是普通文本的效果。
五、插值表达式注意点
插值表达式只能书写在标签内容区域,可以与其它内容混合。
<body>
<div id="app">
<ul>
<li id="{{ 1 + 2 + 3 }}"></li>
</ul>
</div>
<script src="js/vue-2.6.14.js"></script>
<script>
new Vue({
el:'#app'
})
</script>
</body>
内部只能书写 JavaScript 表达式,不能书写语句。
<body> <div id="app"> <ul> <li>{{ var i = 0}}</li> </ul> </div> <script src="js/vue-2.6.14.js"></script> <script> new Vue({ el:'#app' }) </script></body><body>
<div id="app">
<ul>
<li>{{ var i = 0}}</li>
</ul>
</div>
<script src="js/vue-2.6.14.js"></script>
<script>
new Vue({
el:'#app'
})
</script>
</body>
六、插值表达式补充
插值表达式中不仅可以书写数学运算,还可以书写三元运算符。
<body>
<div id="app">
<ul>
<li>{{ 10>20?'10大于20':'10不大于20' }}</li>
</ul>
</div>
<script src="js/vue-2.6.14.js"></script>
<script>
new Vue({
el:'#app'
})
</script>
</body>
来源:https://blog.csdn.net/qq_36213140/article/details/122676553


猜你喜欢
- 每天都要记得健康打卡尊敬的老师,我忘了这次的健康打卡,反思的时候我想了很多东西,反省了很多事情,自己也很懊悔,触犯了学校的规定,深刻认识到自
- ndarray 的数据类型数据类型,即 dtype ,也是一个特殊的对象, 它包含了ndarray需要为某一种类型数据所申明的内存块信息(也
- Check In/Out功能简介:该功能是专门针对多用户管理而预设的。即多用户使用多帐号管理同一站点。
- hello.html 文件代码如下:HelloWorld/templates/hello.html 文件代码:<h1>{{ he
- user-define-session-inc.php文件代码:<?php function mysession_open($save
- 关联规则挖掘(Association rule mining)是数据挖掘中最活跃的研究方法之一,可以用来发现事情之间的联系,最早是为了发现超
- 今天发现sympy依赖的库mpmath里也有很多数学函数,其中也有在复平面绘制二维图的函数cplot,具体例子如下from mpmath i
- 前言最近 GitHub 上有个基于 ChatGPT API 的浏览器脚本,openai-translator, 短时间内 star 冲到了
- select count(*) as lot from OA_sample_check where left(ecnNO, LOCATE(&
- 相信爬取大公司的数据时,常常会遇到页面信息动态加载的问题,如果仅仅使用content = urllib2.urlopen(URL).read
- cookie:PHPSESSID=et4a33og7nbftv60j3v9m86cro; Hm_lvt_51e3cc975b346e7705
- 1.VUE验证邮箱export const isEmail = (s) => { return /^([a-
- 【写在前面】这真的是太那个什么了不管怎么说 做过的东西做个笔记总是好的花一点点时间做笔记不然如果哪一天要重新做了 或者哪一天要汇报工作 都不
- 问题描述因为项目强制关闭,但是服务还在运行,导致重新运行项目时候 提示地址已经使用(端口被占用)/usr/bin/python3.5 pyt
- 我一直很难理解Javascript语言的继承机制。它没有"子类"和"父类"的概念,也没有"
- 最近pytorch出了visdom,也没有怎么去研究它,主要是觉得tensorboardX已经够用,而且用起来也十分的简单pip insta
- 在网上看到一篇关于隐马尔科夫模型的介绍,觉得简直不能再神奇,又在网上找到大神的一篇关于如何用隐马尔可夫模型实现中文拼音输入的博客,无奈大神没
- 代码及注释如下#Auther Bob#--*--conding:utf-8 --*--#生产者消费者模型,这里的例子是这样的,有一个厨师在做
- 基本开发环境· Python 3.6· Pycharm需要导入的库目标网页分析网站是静态网站,没有加密,可以直接爬取整体思路:1、先在列表页
- 各位大家好!很荣幸能在这里和大家聊聊!(*^__^*) 嘻嘻……此处省略488字,切入正题。关于网页设计这个行业,在中国来讲这个行业并不成熟