vue基础语法之插值表达式详解

更新时间：2022年01月27日 17:23:46 作者：泽哥ins

这篇文章主要为大家详细介绍了vue基础语法之插值表达式，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

一、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>

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!

您可能感兴趣的文章:

Vue公共loading升级版解决思路(处理并发异步差时响应)
这篇文章主要介绍了Vue公共loading升级版（处理并发异步差时响应）,解决思路是通过定义一个全局对象来存储每个接口的响应状态，直到每个请求接口都收到响应才变更状态，结束loading动画，需要的朋友可以参考下
2023-11-11
基于elementUI竖向表格、和并列的案例
这篇文章主要介绍了基于elementUI竖向表格、和并列的案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
Antd的Table组件嵌套Table以及选择框联动操作
这篇文章主要介绍了Antd的Table组件嵌套Table以及选择框联动操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
vue中watch和computed的区别与使用方法
这篇文章主要给大家介绍了关于vue中watch和computed的区别与使用方法的相关资料，文中通过实例代码结束的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2020-08-08
Vue3 全局使用按钮截流指令示例代码
这篇文章主要介绍了Vue3 全局使用按钮截流指令示例代码,Vue2与Vue3中的自定义指令实现方式略有不同，但实现的按钮截流功能是类似的，本文通过示例代码给大家介绍的非常详细，需要的朋友可以参考下
2023-05-05
vue+node+socket io实现多人互动并发布上线全流程
这篇文章主要介绍了vue+node+socket io实现多人互动并发布上线全流程,本文给大家提到了socket.io相关用法概览及开发流程，需要的朋友可以参考下
2021-09-09
vue中标签自定义属性的使用及说明
这篇文章主要介绍了vue中标签自定义属性的使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
使用vue打包时gzip压缩的两种方案
这篇文章主要介绍了使用vue打包时gzip压缩的两种方案小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
vue与TypeScript集成配置最简教程(推荐)
本篇文章主要介绍了vue与TypeScript集成配置最简教程(推荐)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
vue3中pinia的使用及持久化的实现
Pinia是一个基于Vue3的状态管理库,本文主要介绍了vue3中pinia的使用及持久化的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2025-04-04