插值操作

最新推荐文章于 2023-04-06 16:50:43 发布

Chueng_to

最新推荐文章于 2023-04-06 16:50:43 发布

阅读量269

点赞数

分类专栏： Vue学习

本文链接：https://blog.csdn.net/KEY_cheung/article/details/108026775

版权

本文介绍了Vue.js中的模板语法和指令，包括mustache语法用于显示变量和简单表达式，v-once指令用于一次性渲染数据，v-html用于呈现URL数据为链接，v-pre避免指令解析以及v-cloak用于优化组件加载时的显示。

摘要由CSDN通过智能技术生成

1.mustache语法，不仅可以直接写变量，还可以写简单的表达式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>template</title>
</head>
<body>

<div id = "app">
  <h2>{
  {message}}</h2>           <!--打印message信息-->
  <h2>{
  {message}},Li</h2>        <!--打印message信息后接上Li-->
  <h2>{
  {firstname + ' ' + lastname}}</h2>        <!--拼接字符串-->
  <h2>{
  {counter * 5}}</h2>       <!--表达式计算-->
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'hello',
      firstname:'sean',
      lastname:'z',
      counter:50
    }
  })
</script>

</body>
</html>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Chueng_to

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
插值操作

1.mustache语法，不仅可以直接写变量，还可以写简单的表达式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>template</title></head><body><div id = "app"> <h2>{{message}}</h2> ...
复制链接

扫一扫