Svelte 添加数据和使用变量

Svelte 是一种快速构建和开发Web应用程序的工具，与React和Vue相比，它具有优势，因为与这些框架不同，svelte在构建时将应用程序转换为原生JavaScript。而React和Vue在运行时解释代码，这会消耗处理能力。

先决条件： 在开始学习svelte之前，需要熟悉以下技术。

HTML
CSS
JavaScript
Linux

注意： 如果您的系统上没有安装svelte，请按照以下说明进行安装： https://www.geeksforgeeks.org/svelte-introduction-and-installation/

组件： 在svelte中，Web应用程序由组件构建，组件是封装、可重用的代码块，将HTML、CSS和JS封装到一个单独的文件中 <filename>.svelte

添加数据和使用变量： 首先，创建一个App.svelte文件，并使用以下代码示例来清楚您的概念。

语法：

let <varname> ='value';

参数:

<varname> : 使用你喜欢的任何标识符名称。
value: 使用任何类型的数据，如数字，字符或字符串等。

示例1: 在这个示例中，我们将使用变量来存储文本内容和颜色值，并调用一个函数来更改变量的值。

Javascript

<script>
// Svelte adding data and working with variables
 
    // Here we are using two variables one to 
    // store string value and other to store 
    // color value to control css styling.
    let name = 'geeksforgeeks';
    let col = '#0000FF';
 
    // counter variables
    let c = 0, c1 = 0;
    function handle() {
        if (c === 0) {
            name = name.toUpperCase();
            c++;
        }
        else {
            name = name.toLowerCase();
            c--;
        }
    }
    function color_handler() {
        if (c1 === 0) {
            col = '#00FF00';
            c1++;
        }
        else {
            col = '#0000FF';
            c1--;
        }
    }
</script>
<h1 style=color:{col};>Welcome to >> {name}</h1>
<button on:click={handle}>
    Change_case
</button>
<button on:click={color_handler}>
    color change
</button>

输出：

Svelte 添加数据和使用变量

示例 2： 在这个示例中，我们将使用变量来控制

元素中的内容，并动态改变其属性。

JavaScript

<script>
    let name = 'Welcome to GeeksforGeeks';
    let msg = "message";
    let col = '#0000FF';
    let bg = '#0000FF';
    let back = '#D3D3D3';
    function change_n() {
        msg = "Hello Nerd!!!";
        bg = '#0000FF';
    }
    function change_g() {
        msg = "Welcome to GeeksforGeeks";
        bg = '#00FF00';
    }
</script>
 
<body style=background-color:{back};>
    <h1 style=color:{col};>SVELTE:</h1>
 
    <dialog open style=color:{bg};>{msg}</dialog>
    <button on:click={change_n}>
        nerd
    </button>
    <button on:click={change_g}>
        geek
    </button>
 
</body>

输出：

Svelte 添加数据和使用变量