vue3 插值表达式

已于 2023-10-17 11:33:55 修改
阅读量125 收藏
点赞数
分类专栏： Vue3 文章标签： vue.js javascript 前端
于 2023-10-17 11:21:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sky_MaoXiaoqi/article/details/133879974
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- vue.js -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <!-- 1.插值 message 来自下面的变量 -->
    <h1>{{ message }}</h1>

    <h1 style="color: red">点-{{num}}</h1>
</div>
</body>
<script>
    // 引入
    const { createApp, ref } = Vue
    // 创建
    createApp({
        //setup 标记 Vue3 支持Vue3的语法 直接定义变量、函数都可以
        setup() {
            const message = ref("Hello vue！")

            const num = ref(123)

            return {
                message,num
            }
        }
    }).mount('#app')
</script>
</html>
征途漫漫，唯有奋斗
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE---3.插值符原理
xi_xi_123456的博客
08-22 507
3. data发生变化 视图(HTML)结构也会发生变化。1. 插件符 {{表达式}} || 字符串模板。2. 是将数据转化成字符串输出。
Vue插值指令3
m0_44974944的博客
09-24 134
Vue插值指令3 1.v-if、v-else v-if条件为false时，不会有元素在dom中。（当只有一次切换时，使用v-if） <body> <div id="app"> <h2 v-if="scroce>=90">优秀</h2> <h2 v-else-if="scroce>=80">很好</h2> <h2 v-else="scroce>=70"&
Vue学习03_插值操作
旧梦半岛的博客
09-26 184
插值操作 Mustache也叫胡子语法，简单来说就是两个大括号{{}}，中间放置我们要显示的变量： 示例代码： <div id="app"> <h2>{{message}}</h2> <p>{{'姓名：' + name +'，性别：' + sex + ',年龄:' + age}}</p> <p v-once>{{'姓名：' + name +'，性别：' + sex + ',年龄
Vue3.x基础-3.插值表达式
Delete_89x的博客
10-26 1009
插值表达式： 说起插值表达式，可能有的都觉得不太熟悉，但是又听说过，自己也有印象，它也有另一个名字叫字面量，“Mustache”语法 (双大括号) 就是我们看到的{{msg}}这种东西。 msg标签的对应着Vue组件实例里data中某个变量的值，当绑定组件实例上的msg property 发生了改变，插值处的内容也会被更新。 首先在data中定义一个变量： data: { msg: "678" } 这种语法不能使用在标签里，也就是不能作为标签的属性来写，如下的写法是错误的。 <div cl
三，vue的基础语法之插值操作
weixin_44731169的博客
07-12 594
前面通过简单的案例，了解了vue的基本能使用，现在我开始记录一些关于Vue的基础语法，以便于后来在创建Vue的项目的时候，对于Vue有一个更加深刻的理解。 这个章节介绍插值操作，像前面案例中{{message}}就是一个最基础的文本插值 插值操作主要是包括Mustache语法，v-once，v-text, v-pre, v-html, v-clock等指令的使用 一，Mustache语法 数据绑定中，最常见的形式就是使用‘Mustache’语法（双大括号）的文本插值 <span>{{mess
简单了解vue 插值表达式Mustache
10-15
主要介绍了vue 插值表达式Mustache的相关资料，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
Vue插值、表达式、分隔符、指令知识小结
10-17
主要介绍了Vue插值、表达式、分隔符、指令的相关知识，文中给大家提到了去除vue插值表达式{{}}的方法,需要的朋友可以参考下
01-插值表达式.vue
07-08
01-插值表达式.vue
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
10-17
在开发过程中经常会发现当页面明明不应该出现的元素或内容会闪现一下然后消失，这篇文章给大家分享Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法，一起看看吧
Vue3——第二章（模板插值语法、指令）
why404
01-09 532
学习Vue3——第二章（模板插值语法、指令）
教程5 Vue3常用内置指令（插值、v-bind、v-model、v-on、v-text、v-html、v-once、v-pre、v-cloak、v-slot）
boxuestudio的博客
03-05 1375
教程5 Vue3常用内置指令（插值、v-bind、v-model、v-on、v-text、v-html、v-once、v-pre、v-cloak、v-slot）
vue3插值的四种类型
滴水石穿
06-07 471
vue3插值的四种类型
Vue3+Vite实现工程化，插值表达式和v-text以及v-html
最新发布
小丁的博客
11-18 778
插值表达式是将数据 渲染 到元素的指定位置的手段之一 插值表达式 不绝对依赖标签，其位置相对自由 插值表达式中支持javascript的 运算表达式 插值表达式中也支持 函数的调用
【Vue3】书写风格、模板插值语法、指令
小秀的博客
07-25 242
v-else-if 表示 v-if 的“else if 块”。v-if 用来控制元素的显示隐藏（切换真假DOM，直接注释掉表达式内容）v-show 用来控制元素的显示隐藏（display:none 的切换）v-else v-if条件收尾语句。v- 开头都是 vue 的指令。// 定义变量和方法。
Vue3国际化适配（i18n）的简单使用（非常简单）
m0_64664995的博客
07-12 4107
【代码】Vue3国际化适配（i18n）的简单使用（非常简单）
Web前端开发之VUE03——vue插值表达式、MVVM设计模式、基础指令
DRLDER的博客
04-12 610
vue插值表达式： MVVM设计模式： VUE的设计模式，可以实现双向绑定，同时对view和model的变化进行同时改变。 v-bind： v-on: v-on中事件对象的传递： vue修饰符： 详细修饰符见：详细修饰符https://cn.vuejs.org/v2/guide/events.html v-model: 进行表单的value属性和我们变量互相绑定到一起。 示例代码： <template> &...
简单实现Vue中的插值替换(三)
@不喝海之言@
08-21 649
简单实现Vue中的插值替换(三) 传送门：简单实现Vue中的插值替换(二) 这（三）的内容，大家可以当做对（二）的补充，主要就是为了解决，多级对象的访问问题。 OK，咱们正式开始。 首先我们还是来简简单单的说一下这个问题。 咱们定义一个对象，对象的层级是不确定的，就比如： data = { a: { b: { c: { d: '这是要获取的值' } } } } 既然如此，那如何
Vue系列(三)之基本语法文本插值
安妍妍的博客
12-30 2233
基本语法Vue实例插值普通文本原始html 今天主要介绍Vue常见的语法，声明式渲染和常用的指令。 Vue实例 上篇文章中我们使用new关键字创建了一个Vue实例： <div id="app"> <div>messgae：{{message}}</div> </div> <script> var vm = new Vu...
3.Vue插值表达式
西瓜咬人啦
10-20 4431
1.插值表达式 插值表达式是Vuejs中实现数据渲染到页面方式，不用进行dom操作可以直接将数据从模型到视图。 插值表达式就是{{ }}，括号里面可以执行简单的js代码 。将模型变量中的属性直接放到插值表达式中可以实现数据渲染到页面的效果。 2.插值表达式插值表达式支持简单的语法 操作 解释 常规变量 number，string，boolean等 四则运 +，-，*，/,% 逻辑运算 或与非 三目运算 全局函数 {{ Math.random() }} 对象 {{ {
vue3插值三元表达式
06-10
在 Vue3 中，插值三元表达式的语法与 Vue2 中基本相同，只是在绑定数据时需要使用新的语法。例如，我们可以这样使用插值三元表达式： ``` {{ isShow ? '显示内容' : '隐藏内容' }} ``` 其中，isShow 是我们在 Vue ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值