vue快速入门(三)差值表达式

news2024/11/17 21:48:20

注释很详细,直接上代码

上一篇

新增内容

  1. 插值表达式基本用法
  2. 插值表达式常用公式

源码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 挂载点 -->
  <div id="root">
    <!-- 两种方法都可以 -->
    <div>昵称:{{message.nickname}}</div>
    <div>{{'昵称:'+message.nickname}}</div>
    <!-- 多层嵌套 -->
    <div>虚岁:{{message.age}}</div>
    <!-- 运算符 -->
    <div>虚岁x2:{{message.age*2}}</div>
    <div>虚岁x2:{{message.age+message.age}}</div>
    <!-- 三元操作符 -->
    <div>年龄阶段:{{message.age>=18?'成年':'未成年'}}</div>
    <!-- 大写变换 -->
    <div>爱好:{{message.hobby[0].toUpperCase()+' '+message.hobby[1].toUpperCase()}}</div>
  </div>

  <!-- 导入vue的js代码 -->
  <script src="./lib/vue2.js"></script>

  <script>
    const app = new Vue({// Vue实例
      el: '#root',// 挂载点
      data: {// 数据
        message:{
          nickname:'眨眼睛',
          age:38,
          hobby:['eating','sleeping'],
        }
      }
    })
  </script>
</body>
</html>

效果演示

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1567738.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

显示器and拓展坞PD底层协商

简介&#xff1a; PD显示器或者PD拓展坞方案中&#xff0c;连接显示设备的Type-C端口主要运行在DRP模式&#xff0c;在此模式下可以兼容Source&#xff08;显卡&#xff09;、Sink&#xff08;信号器&#xff09;、DRP&#xff08;手机、电脑&#xff09;模式的显示设备。 Sou…

维基百科:8个提升维基百科推广效果的优化技巧-华媒舍

维基百科是全球最大的在线百科全书&#xff0c;致力于向用户提供高质量、可靠的知识内容。想要让自己的文章在维基百科中获得更多的曝光度和推广效果&#xff0c;并非易事。为此&#xff0c;我们整理了以下8个提升维基百科推广效果的优化技巧。 1. 确保内容符合要求 维基百科对…

Quiet-STaR:让语言模型在“说话”前思考

大型语言模型(llm)已经变得越来越复杂&#xff0c;能够根据各种提示和问题生成人类质量的文本。但是他们的推理能力让仍然是个问题&#xff0c;与人类不同LLM经常在推理中涉及的隐含步骤中挣扎&#xff0c;这回导致输出可能在事实上不正确或缺乏逻辑。 考虑以下场景:正在阅读一…

windows下安装iteliij Idea2023.3

首先从官网下载 下载 IntelliJ IDEA – 领先的 Java 和 Kotlin IDE 双击打开进行安装&#xff1a; 安装完成后&#xff0c;需要对Idea进行稍微处理下。使用我分享给大家的文件&#xff0c;操作以下步骤&#xff1a; 注意&#xff1a;不能打开IDEA软件。 进入到scripts中点击un…

Spring Cloud微服务入门(一)

微服务的演变过程 //controller 视图交互层 前端数据处理传给service //1.DAO RequestBody userDAO String id;String type; {"id":"lcs", "type":"lcs"} //2.GET请求 findUserById&#xff1f;id1&typelcsRequestParam String …

css3之3D转换transform

css3之3D转换 一.特点二.坐标系三.3D移动&#xff08;translate3d)1.概念2.透视&#xff08;perpective)(近大远小&#xff09;&#xff08;写在父盒子上&#xff09; 四.3D旋转&#xff08;rotate3d)1.概念2.左手准则3.呈现&#xff08;transfrom-style)&#xff08;写父级盒子…

Python脚本:给TXT文件中的地铁站名添加引号

Python脚本&#xff1a;给TXT文件中的地铁站名添加引号 在日常的数据处理工作中&#xff0c;我们经常需要对文本数据进行格式化和处理。今天&#xff0c;我们就来分享一个使用Python脚本对TXT文件中的地铁站名进行处理的小技巧&#xff1a;将每行的地铁站名字加上双引号。 需求…

创新指南|贝恩的产品经理RAPID框架:解决问题的分步指南,使决策过程既高效又民主

您是否曾发现自己陷入项目的阵痛之中&#xff0c;决策混乱、角色不明确、团队成员之间的冲突不断升级&#xff1f;作为产品经理&#xff0c;驾驭这艘船穿过如此汹涌的水域可能是令人畏惧的。应对这些挑战的关键在于采用清晰、结构化的决策方法。输入贝恩的 RAPID 框架&#xff…

基于8B10B的GT收发器PHY层设计(3)PHY层设计

文章目录 前言一、设计框图二、PHY层基本传输协议三、PHY_TX模块3.1、模块接口3.2、组帧状态机描述3.3、数据大小端问题3.4、字节对齐 四、PHY_RX模块4.1、模块接口4.2、大小端转换4.3、起始位4.4、结束位4.5、axis数据流恢复 五、LFSR伪随机码六、链路空闲时期处理 前言 上一…

宁盾入选“2023年度中国高科技高成长企业榜”多个榜单

4月1日&#xff0c;由【第一新声】联合【天眼查】启动“数字未来”系列之 2023 年度中国高科技高成长企业系列榜单正式发布。宁盾入选未来独角兽企业、网络安全领域高成长企业、信创产业最佳服务商、企业数字化标杆案例 4 个榜单。 该榜单旨在发现和挖掘被资本市场关注&#xf…

基于顺序表 --- 实现简易【通讯录】

1. 多文件操作 SeqList.h //用于定义顺序表的结构&#xff0c;增删查改等函数的声明 SeqList.c //用于实现增删查改等函数 Contact.h //用于定义通讯录的结构&#xff0c;通讯录中联系人的增删查改等函数的声明 Contact.c //用于实现通讯录中增删查改等函数 Test.h //用于测试…

重磅!openGauss6.0创新版本,带着新特性正式发布了!

&#x1f4e3;&#x1f4e3;&#x1f4e3; 哈喽&#xff01;大家好&#xff0c;我是【IT邦德】&#xff0c;江湖人称jeames007&#xff0c;10余年DBA及大数据工作经验 一位上进心十足的【大数据领域博主】&#xff01;&#x1f61c;&#x1f61c;&#x1f61c; 中国DBA联盟(ACD…

最新社交相亲系统源码PHP

最新社交相亲系统源码PHP 安装环境&#xff1a; php7.2 mysql 5.7 框架&#xff1a; 后端thinkphp6 前端&#xff1a;jquery layui PC 移动端响应式 线上案例&#xff1a;https://cjr.oemsun.com/ 主要页面及功能预览 首页 相亲资料详情页 红娘跟进记录 海报、一键复制分…

实操:Dropzone.js实现文件上传

&#x1f3e0;官网 点我前往 &#x1f953;依赖 <script src"https://unpkg.com/dropzone5/dist/min/dropzone.min.js"></script> <link rel"stylesheet" href"https://unpkg.com/dropzone5/dist/min/dropzone.min.css" type&…

STL——vector容器基本使用与常用接口模拟实现

vector的介绍及使用 vector的介绍 vector是表示可变大小数组的序列容器。 就像数组一样&#xff0c;vector也采用的连续存储空间来存储元素。也就是意味着可以采用下标对vector的元素进行访问&#xff0c;和数组一样高效。但是又不像数组&#xff0c;它的大小是可以动态改变的…

自然语言处理NLP概述

大家好&#xff0c;自然语言处理(NLP)是计算机科学领域与人工智能领域中的一个重要方向&#xff0c;其研究能实现人与计算机之间用自然语言进行有效通信的各种理论和方法。本文将从自然语言处理的本质、原理和应用三个方面&#xff0c;对其进行概述。 一、NLP的本质 NLP是一种…

神经网络学习笔记10——RNN、ELMo、Transformer、GPT、BERT

系列文章目录 参考博客1 参考博客2 文章目录 系列文章目录前言一、RNN1、简介2、模型结构3、RNN公式分析4、RNN的优缺点及优化1&#xff09;LSTM是RNN的优化结构2&#xff09;GRU是LSTM的简化结构 二、ELMo1、简介2、模型结构1&#xff09;输入2&#xff09;左右双向上下文信…

【史上最细教程】 Typora+PicGo+Gitee 实现发给别人的Typora笔记也能看到图片

文章目录 问题描述前提准备&#xff1a;操作步骤&#xff1a;1.Gitee新建项目作为图床、获取仓库访问密钥2.PicGo连接Gitee图床3.Typora连接PicGo 问题描述 Typora记录的笔记&#xff0c;图片保存默认在本地&#xff0c;这时候复制出来上传CSDN、或发给别人的时候图片就是空链…

Qt 的发展历史、现状与启示

Qt 最早在1991年由挪威的两位程序员 Eirik Chambe-Eng 和 Haavard Nord 开发&#xff0c;他们在1994年创立 Trolltech 公司&#xff08;奇趣科技&#xff09;正式经营软件业务。Qt 的第一个公众预览版于1995年面世&#xff0c;之后在2008年被诺基亚收购&#xff1b;2011年到201…

【漏洞复现】万户 ezOFFICE wf_printnum SQL注入漏洞

免责声明&#xff1a;文章来源互联网收集整理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该…