如何安装svelte_在Svelte中使用if块

最新推荐文章于 2024-06-03 09:58:12 发布

cukw6666

最新推荐文章于 2024-06-03 09:58:12 发布

阅读量437

点赞数

文章标签： python vue js java javascript ViewUI

原文链接：https://www.digitalocean.com/community/tutorials/svelte-using-if-blocks

版权

如何安装svelte

In this tutorial, we’ll see how to use the if blocks with the Svelte framework to add some flow control logic to our Svelte markup code.

在本教程中，我们将看到如何在Svelte框架中使用if块向Svelte标记代码添加一些流控制逻辑。

Blocks in Svelte start use the {#block}...{/block} syntax, so if blocks use the {#if}...{/if} syntax. And, as you’ll see, we can also add an else block and/or elseif blocks as part of an if block.

Svelte中的块开始使用{#block}...{/block}语法，因此if块使用{#if}...{/if}语法。而且，正如您将看到的，我们还可以添加一个else块和/或elseif块作为if块的一部分。

Let’s start with the simplest example where we only show some markup if the lightsOn prop passed-in evaluates to true:

让我们从最简单的示例开始，在该示例中，如果所传入的lightsOn评估为true，则仅显示一些标记：

SomeComponent.svelte

<script>
  export let lightsOn;
</script>

{#if lightsOn}
  <p>I can see clearly now!</p>
{/if}

We can also add an else block using the {:else} syntax:

我们还可以使用{:else}语法添加一个else块：

SomeComponent.svelte

<script>
  export let lightsOn;
</script>

{#if lightsOn}
  <p>I can see clearly now!</p>
{:else}
  <p>It's too dark in here! 🌑</p>
{/if}

elseif (elseif)

We can also add any number of elseif blocks with the {:else if condition} syntax. Let’s modify our example a little:

我们还可以使用{:else if condition}语法添加任意数量的elseif块。让我们对示例进行一些修改：

SomeComponent.svelte

<script>
  export let pickedColor;
</script>

{#if pickedColor === 'green'}
  <p>I agree with you! 💚</p>
{:else if pickedColor === 'blue'}
  <p>Even better! 💙</p>
{:else if pickedColor === 'purple'}
  <p>Ok then! 💜</p>
{/if}

And in the above example we could have also added an else block as the last item in our if block to add some markup if none of our conditions have been true.

而在上面的例子中，我们可以还添加了else块作为最后一个项目我们if块添加一些标记，如果没有我们的情况是真实的。

Next let’s go over a simple app example that uses an if block to hide or display some markup. The example will also be a good reminder on how to initialize a new Svelte project.

接下来，让我们看一个简单的应用示例，该示例使用if块隐藏或显示一些标记。该示例还将很好地提醒您如何初始化新的Svelte项目。

Feel free to skip that part if you feel like you now have a good grasp over setting up a Svelte project and using if blocks.

如果您觉得自己现在对设置Svelte项目和使用if块有了很好的了解，请随时跳过该部分。

示例应用 (Example App)

To help illustrate and hammer-in the knowledge around if blocks, we’ll create a small and simple QR code generator app with the help of this QR code generator API.

为了帮助说明和了解if块的知识，我们将在此QR代码生成器API的帮助下创建一个小型且简单的QR code generator应用。

So, let’s start our journey with this mini project 🚣‍.

因此，让我们开始这个迷你项目🚣‍。

项目设置 (Project Setup)

Install the recommended version of the Node if you don’t have one.
如果您没有安装推荐版本的Node 。
Create a folder for the new project
为新项目创建一个文件夹

Now open your terminal and type the below commands:

现在打开您的终端并输入以下命令：

$ npx degit sveltejs/template qr-code-generator
$ cd qr-code-generator
$ npm install

Now to see whether you setup your project correctly or not run the below command: 🙈

现在查看是否正确设置了项目，然后运行以下命令：🙈

$ npm run dev

Now open localhost:5000 in your browser.

现在，在浏览器中打开localhost:5000 。

It should look something like this:

它看起来应该像这样：

Your file structure will look something like this.

您的文件结构将如下所示。

qr-code-generator
  |- node_modules  
  |- index.js
  |- public
  |- src
    |- App.svelte
    |- main.js

Open App.svelte. this is the main file where we’ll write our code. Start by deleting all its content.

打开App.svelte 。这是我们编写代码的主文件。首先删除其所有内容。

开始建设项目 (Start Building the Project)

HTML和CSS部分 (HTML and CSS parts)

Let’s first start with the HTML markup part and making a small form to submit the text entered for which you have to generate the QR Code.

首先让我们从HTML标记部分开始，然后做一个小表格以提交输入的文本，您必须为此生成QR码。

App.svelte

<div class="wrapper">
  <h1>QR CODE GENERATOR</h1>
  <form on:submit|preventDefault={dataSubmit}>
    <input bind:value={inputText}
            class="textInput"
            type="text"
            placeholder="Enter any text or url..." />
    <input class="btn" type="submit" value="Submit" />
  </form>
</div>

Here, dataSubmit is a function we’ll later in the JavaScript part. on:submit is similar to the native onsubmit() and is used as the event handler for the form’s submit event. Notice how we’ve also used the preventDefault modifier to avoid having to add extra boilerplate code to our handler function.

这里， dataSubmit是我们稍后在JavaScript部分dataSubmit要使用的函数。 on:submit与本机onsubmit()相似，并用作表单的submit事件的事件处理程序。请注意，我们还如何使用了preventDefault修饰符，以避免必须在处理程序函数中添加额外的样板代码。

bind:value={inputText} is for two-way binding between the value of the input and the inputText variable.

bind:value={inputText}用于在输入值和inputText变量之间进行双向绑定。

You can also write the CSS on the same App.svelte file using a style tag:

您还可以使用style标签在同一App.svelte文件上编写CSS：

App.svelte

.wrapper {
  max-width: 700px;
  margin: 0 auto;
}

.textInput {
  width: 70%;
  height: 40px;
  color: #484848;
  border-width: 1.5px;
  border-style: solid;
  border-color: black;
  padding: 3px;
  font-weight: 700;
}

.btn {
  border-radius: 3px;
  background-color: black;
  color: whitesmoke;
  font-weight: 700;
  cursor: pointer;
}

After writing the above code, the page will look something like this:

编写完上面的代码后，页面将如下所示：

脚本部分 (Scripting Part)

In the same App.svelte file you can write the JavaScript part also using a script tag.

在同一App.svelte文件中，您还可以使用script标记编写JavaScript部分。

Initialize the QR server API with the variable and also initialize the above-used variables inside the script tag. The dataSubmit() function should also be defined there.

使用变量初始化QR server API ，并在script标签内初始化上述变量。 dataSubmit()函数也应在此处定义。

App.svelte

<script>
let inputText = "";
let API_URL = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=";
function dataSubmit(e) {
  // logic will go here
}
</script>

Next let’s create a variable which indicates whether or not text is entered by the user and start writing the logic for the QR code:

接下来，让我们创建一个变量，该变量指示用户是否输入了文本，并开始编写QR码的逻辑：

App.svelte

<script>
let inputText = "";
let textPresent = false;
let API_URL = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=";
function dataSubmit(e) {
  if (inputText !== "") {
    textPresent = true;
    API_URL += inputText;
  }
}
</script>

输入是否阻止 (Enter if Blocks)

Now we have to add some HTML and the if block part to show the generated QR code when text is entered:

现在，我们必须添加一些HTML和if块部分，以在输入文本时显示生成的QR代码：

App.svelte

<div  class="wrapper">
  <h1>QR CODE GENERATOR</h1>
  <form on:submit={dataSubmit}>
    <input class="textInput"
           type="text"
           placeholder="Enter any text or url..."
           bind:value={inputText} />
    <input class="btn" type="submit" value="Submit" />
  </form>

  {#if textPresent}
    <img src={API_URL} /><br>
    <a href={API_URL} download>Download</a> 
  {/if}
</div>

If textPresent is true then the markup inside the if block will be visible and included in the DOM.

如果textPresent为true，则if块内的标记将可见并包含在DOM中。

其他块 (else Block)

You can also use an else block to display something else if the condition of the if statement doesn’t evaluate to true:

if语句的条件未达到true，则还可以使用else块显示其他内容：

<div  class="wrapper">
  <h1>QR CODE GENERATOR</h1>
  <form on:submit={dataSubmit}>
    <input class="textInput"
           type="text"
           placeholder="Enter any text or url..."
           bind:value={inputText} />
    <input class="btn" type="submit" value="Submit" />
  </form>

  {#if textPresent}
    <img src={API_URL} /><br>
    <a href={API_URL} download>Download</a> 
  {:else}
    <p>No QR code yet! ☹️</p>
  {/if}
</div>

Now add a little bit more styling: 🤓

现在添加更多样式：🤓

App.svelte

img {
  margin-top: 100px;
  margin-bottom: 30px;
}

a {
  font-weight: 700px;
  font-size: 30px;
  color: black;
}

Now on entering some text in the input box and clicking submit you will get the QR code representing that text.

现在，在输入框中输入一些文本，然后单击提交，您将获得代表该文本的QR码。

Something like this 😍.

这样的东西😍。

Your app is now ready for production! 🥳🔥

您的应用现在可以投入生产了！ 🥳🔥

翻译自: https://www.digitalocean.com/community/tutorials/svelte-using-if-blocks

如何安装svelte

cukw6666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫