Vue.js学习笔记——1.基本插值操作指令

最新推荐文章于 2024-02-01 17:54:39 发布

土拨鼠的忧伤丶

最新推荐文章于 2024-02-01 17:54:39 发布

阅读量227

点赞数 1

分类专栏： Vue.js学习笔记文章标签： vue.js

本文链接：https://blog.csdn.net/DDDDDecade/article/details/109801856

版权

基本插值操作指令（一）

1.mustache语法

{ {message}}
即双大括号，插值表达式。作用：将data中文本数据插入到HTML中
举例：

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

<div id="app">
  <h2>{
  {message}}</h2>
  <h2>{
  {message}},qbj</h2>
  <h2>{
  {firstname+' '+lastname}}</h2>
  <h2>{
  {firstname}} {
  {lastname}}</h2>
  <h2>{
  {counter * 2}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    
    el:"#app",
    data:{
    
      message:"你好啊",
      firstname:"kobe",
      lastname:"bryant",
      counter:100
    }
  })
</script>

</body>
</html>

执行结果： mustache执行结果

mustache语法中不仅可以写变量，也可以写简单的表达式

2.v-once

该指令表示元素和组件只渲染一次，不会随着数据的改变而改变
该指令后面不需要跟任何表达式（如v-for=""）
语法：

<element v-once></element>

举例：

<!DOCTYPE html>

最低0.47元/天解锁文章

土拨鼠的忧伤丶

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js学习笔记——1.基本插值操作指令

目录基本语法及指令（一）1.mustache语法2.v-once3.v-html4.v-text5.v-pre6.v-cloak基本语法及指令（一）1.mustache语法{{message}}即双大括号，插值表达式。作用：将data中文本数据插入到HTML中举例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</tit
复制链接

扫一扫