模 板 编 译

news/2024/7/7 18:34:46

模板编译

Vue 的核心功能之一,模板编译。我们无需关心如何通过数据操作 DOM 进行页面渲染,这些事情 Vue 内部已经帮我们实现了。我们只需要关心数据层面即可。

基础使用

在选项 data 中定义了 message 变量,只需要在 template 中进行调用即可。页面中就会渲染出来 hello world

app.vue

<template>
    <div>
        {{ message }}
    </div>
</template>

<script>
export default {
    data() {
        return {
            message: 'hello world'
        }
    }
}
</script>

模板语法中可使用简单的 JavaScript 表达式

页面渲染 50。

<template>
    <div>
        {{ num1 + 30 }}
    </div>
</template>

<script>
export default {
    data() {
        return {
            num1: 20
        }
    }
}
</script>

又或者还有其他情况,以下这些例子都是可以的。

<template>
    <div>
        {{ number + 1 }}

        {{ ok ? 'YES' : 'NO' }}

        {{ message.split('').reverse().join('') }}
    </div>
</template>

但是这些是不行的。

<template>
    <div>
        <!-- 这是语句,不是表达式 -->
        {{ var a = 1 }}

        <!-- 流程控制也不会生效,请使用三元表达式 -->
        {{ if (ok) { return message } }}
    </div>
</template>

原文链接:菜园前端


http://lihuaxi.xjx100.cn/news/1518634.html

相关文章

七、SSM 框架整合

目前已经学习了 MyBatis 框架&#xff0c;Spring 框架&#xff0c;以及Spring MVC 框架。现阶段学习将这三个框架整合到一起&#xff0c;实现简单的前后端交互的曾删改差功能页面。 Mybatis 框架主要负责数据库的操作问题&#xff0c;以及数据回显。该框架将 SQL 与 Jav…

语音增强-谱减法

导入相关包 import librosa import numpy as np import matplotlib.pyplot as plt from playsound import playsound import soundfile as sf 加载音源 # 干净的声音 clean_wav_file sf1_cln.wav clean, fs librosa.load(clean_wav_file, srNone) # 带噪音的声音 noise_w…

使用maven idea环境

创建模块工程后 idea三种方式执行maven命令 想在哪个工程模块上执行就点开哪一个 如果觉得双击完clean再双击install麻烦&#xff0c;可以 如果有需要还可以给命令后面加参数 ​​​ 第三种&#xff0c;在终端中打开&#xff0c;相当于通过idea进入了命令行 工程导入 导入模块…

L1和L2正则

L1和L2正则 L1正则常被用来进行特征选择&#xff0c;主要原因在于L1正则化会使得较多的参数为0&#xff0c;从而产生稀疏解&#xff0c;我们可以将0对应的特征遗弃&#xff0c;进而用来选择特征。一定程度上L1正则也可以防止模型过拟合。 L2正则&#xff1a; L1损失函数相比于…

SecureCRT 解决Log加时间设置

SecureCRT相比putty、MobaXTerm等调试工具有一个突出的优点&#xff0c;它的log功能非常好用&#xff0c;可以在每行log都加入时间戳&#xff0c;精确到毫秒&#xff0c;以下是CRT的log配置设置: 一: 打开Options Global Options–>Default Session–>Edit Default Set…

尼康D90使用心得

文章目录 规格参数快速指南相机机身模式拨盘控制面板取景器拍摄信息展示 核心功能指令拨盘拍摄模式自动模式场景模式快门速度和光圈 固件、软件、驱动升级更多细节参考 规格参数 型号尼康D90发布日期2008年08月机身特性APS-C规格数码单反产品定位中端单反传感器类型CMOS传感器…

javascript将数组中的数字类型元素保留两位小数

如果你想要将数组中的数字类型元素保留两位小数&#xff0c;你可以使用以下的方法。假设你的数组是JavaScript的数组&#xff0c;代码可能是这样的&#xff1a; var array [123.456, 456.789, 321.123]; // 原始数组 var newArray [];for (var i 0; i < array.length; i…

大数据课程K21——Spark的SparkSQL基础语法

文章作者邮箱:yugongshiye@sina.cn 地址:广东惠州 ▲ 本章节目的 ⚪ 掌握Spark的SparkSQL通过方法来使用; ⚪ 掌握Spark的SparkSQL通过sql语句来调用; 一、SparkSQL基础语法——通过方法来使用 1. 查询 df.select("id","name").show()…