二、 插值

最新推荐文章于 2024-09-01 17:42:28 发布
原创 最新推荐文章于 2024-09-01 17:42:28 发布 · 272 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #vue

本文详细介绍Vue.js的基础使用，包括插值显示、列表展示、计数器功能、Mustache语法及v-cloak指令的运用。通过实例讲解Vue的变量绑定、事件监听、模板语法等核心概念。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、入门学习

1. 普通插值{{}}

  • let：变量 ----- const：常量；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue第一个页面</title>
</head>

<body>

    <!--1. 如果为class，则下面为 " . "
        2. 如果为id，则下面为 " # "    -->

    <div class = "first">
        {{name}} {{age}} {{address}}
    </div>

    <div id = "second">
        {{name}} {{age}} {{address}}
    </div>


    <!--1. 引入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        /* 1.1 第一个模块变量*/
        // Vue对象： 名称必须是Vue
        const firstModule = new Vue({
            el: ".first",
            data: {
                name: "舒展",
                age: "27",
                address: "陕西富平",
            }
        })

        /*1.2 第二个模块变量，不同模块的名字必须不同*/
        const  secondModule = new Vue({
            el: "#second",
            data: {
                name: "路西",
                age: "24",
                address: "湖南长沙",
            }
        })

    </script>
</body>
</html>

2 .列表展示(v-for)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二个案例</title>
</head>

<body>

<div class="first">
    <!--1. 无序列表，其中name可以换为其他任意字段-->
    <ul>
        <li v-for = "name in names">{{name}}</li>
    </ul>

    <!--2. 有序列表-->
    <ol>
        <li v-for = "item in names">{{item}}</li>
    </ol>

    <!--3. 控制台：
                 可以通过module.names.push('jerry')向数组中添加元素，
                 并且页面数据会动态变化   -->

</div>



<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    let module = new Vue({
        el: ".first",
        data: {
            /*数组*/
            names : ['Tom','Jack','Lucy'],
            address: "陕西富平",
        }
    })
</script>

</body>
</html>

3. 计数器(v-on:click)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计数器</title>
</head>
<body>

<div class = "first">

    <!-- 0. h系列标签带自动换行功能，button标签不自动换行，用br换行-->
    <h2>计数器：{{counter}}</h2>

    <!-- 1. 简单的逻辑-->
    <!-- v-on:  代表监听事件； 2. click代表点击事件-->
    <button v-on:click = "counter++">+</button><br>
    <button v-on:click = "counter--">-</button><br>

    <!--2. 复杂的逻辑： 用函数-->
    <!--@click是v-on：click的语法糖-->
    <button @click="plus">+</button><br>
    <button @click="minus">-</button><br>

</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let module = new Vue({
        el: ".first",
        data:{
            counter: 0,
        },
        methods:{

            /*this代表的是module这个对象，不加的话会在该script中去取全局变量*/
            /*console.log: 在浏览器页面打印日志*/

            plus:function (){
                this.counter++;
                console.log("加函数执行")
            },

            minus:function (){
                this.counter--;
                console.log("减函数执行")
            }
        }
    })
</script>
</body>
</html>

4. Mustache语法

  • {{}}；
  • v-pre；
  • v-once；
  • v-text ；
  • v-html；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div class="first">
    <!--1. {{}} 插值显示-->
    {{firstName}}<br>                      <!--单独显示-->
    {{firstName}}{{lastName}}<br>           <!--组合显示-->
    {{firstName}}{{lastName}}你好啊<br>           <!--组合显示-->
    {{firstName + ":" + lastName}}<br>     <!--字符串拼接-->
    {{age*2+1}}<br>     <!--简单计算-->

    <!-- 2. v-pre： 不解析，直接显示firstName-->
    <h2>{{firstName}}</h2><br>
    <h2 v-pre>{{firstName}}</h2><br>

    <!--3. 一般的，页面控制台修改后变化，
                v-once根据元素和组件只渲染一次，-->
    <h2>{{firstName}}</h2><br>
    <h2 v-once>{{firstName}}</h2><br>

    <!--4. 覆盖： 用address的值将字面覆盖掉，页面显示陕西-->
    <h2>湖南</h2><br>
    <h2 v-text="address">湖南</h2><br>

    <!--5. v-html: 解析-->
    <h2>{{url}}</h2><!--页面显示：<a href="https://www.baidu.com">百度一下</a>-->
    <h2 v-html="url"></h2><!--将拿到的a标签解析成html的链接-->
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>

    let module = new Vue({
        el: ".first",
        data:{
            firstName: "舒",
            lastName: "展",
            age: 18,
            address: "陕西",
            url:"<a href=\"https://www.baidu.com\">百度一下</a>",
        }
    })
</script>

</body>
</html>

5. v-cloak

页面延迟显示；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--样式写在head里面-->
    <!--带有v-cloak的标签不展示-->
    <style>
        [v-cloak]{
            display: none;
        }
    </style>

</head>
<body>
<div id="first">
    <!--vue解析前，div中包含v-cloak属性-->
    <!--vue解析后，div中没有v-cloak属性-->
    <!--页面延迟显示-->
    <h2 v-cloak>{{name}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    /*让js代码睡眠2分钟*/
    setTimeout(function () {
        let app = new Vue({
            el:"#first",
            data:{
                name:"张三"
            }
        })
    },2000)

</script>
</body>
</html>
vue第一天笔记05——v-bind
lqh的博客
08-17 245
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
数值分析实验二 插值计算
努力学习的小菜同学
12-31 1900
一、实验目的 1、通过对拉格朗日插值和牛顿插值作编程练习和上机运算，进一步体会它们的不同特点； 2、比较二者的计算速度。 二、实验内容 1、拉格朗日插值 按下列数据 作拉格朗日插值，并求x1=2，x2=0，x3=2.75时的函数近似值。 2、牛顿插值 按下列数据 作牛顿插值，并求x1=0.46，x2=0.55，x3=0.60时的函数近似值。 三、算法描述 1、拉格朗日插值 2、牛顿插值 四、源程序 #include <iostream> #include <math.h> #
#{} 进行插值
产品人生
10-13 401
特殊的句法 使用 #{} 字符串插值
{{}}插值表达式
anwanfu的专栏
02-14 465
插值${}使用
hqmln的博客
01-12 715
插值的使用语法是：${expression}，expression可以是所有种类的表达式（比如${100 + x}）。 插值是用来给插入具体值然后转换为文本（字符串）。插值仅仅可以在两种位置使用：文本区（如&lt;h1&gt;Hello ${name}!&lt;/h1&gt;）和字符串表达式（如&lt;#include "/footer/${company}.html"&gt;）中。 插值...
Vue v-bind
小牛牛的博客
02-15 2366
图片处理<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/Vue.js" charset="utf-8"></script> <script type="text/javascript"> window.onload = fun
matlab.rar_二次插值_二次插值法
07-15
在数值分析领域，二次插值与黄金分割法是两种常见的技术，它们在工程计算、科学建模以及优化问题中占据着重要的地位。二次插值法主要应用于函数拟合，通过已知数据点构造出一个经过这些点的二次多项式，而黄金分割...
erwei_matlab_二维图像插值_二位插值_插值_二维函数_
10-03
在MATLAB中，二维图像插值是一种常见的处理技术，它用于在给定的离散数据点之间估计连续图像。这个主题通常涉及到四个主要概念：线性插值、双线性插值、最近邻插值和样条插值。在"erwei_matlab_二维图像插值_二位...
二次插值法_包括抛物线插值_三点二次插值_matlab
03-31
资源名：二次插值法_包括抛物线插值_三点二次插值_matlab 资源类型：matlab项目全套源码 源码说明： 全部项目源码都是经过测试校正后百分百成功运行的，如果您下载后不能运行可联系我进行指导或者更换。 适合人群：...
数值计算实验2插值法应用实训 - 数值实验二插值法应用实训Mathematica版.pdf
11-26
用户可以选择第一型或第二型边界条件来构建样条插值函数。在实际应用中，样条插值常用于处理数据平滑和曲线拟合问题。 在数值计算中，选择合适的插值方法至关重要，因为不同的插值方法可能会导致不同的插值精度和...
03-插值表达式 {{ }}
m0_58250910的博客
08-09 521
不允许作为 title 属性的value。表达式: 是可以被求值的代码,JS引擎会将其计算出一个结果。
插值表达式{{}}
最新发布
2301_81705218的博客
09-01 269
表达式：是可以被求值的代码，JS引擎会将其计算出一个结果。插值表达式是一种Vue的模版语法。三.语法{{表达式}}
VUE指令-样式绑定v-bind
12-24 853
样式绑定v-bind 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。 v-bind:style
初始vue、常用指令、{{ }}插值语法
m0_59707151的博客
05-18 306
一、初始vue ​<div id="app"> <h2>{{msg}}</h2> <h2>{{name}}</h2> <h2>{{age.myage}}</h2> </div> <script type="text/javascript"> const app=new Vue({//声明Vue实例化对象 el:'#app',//挂载元素 //data方式一 // data:{/
Vue指令（1）：插值({{}}、v-text和v-html)、v-model、v-on
учёба
10-22 3514
指令 指令 (Directives) ：是带有 v- 前缀的特殊属性。例如在入门案例中的v-model，代表双向绑定。 插值表达式 插值：使用在有需要显示vue实例数据的地方 可以在插值表达式中调用实例的数据属性和函数。 花括号({}) 格式： {{表达式}} 说明： 该表达式支持JS语法，可以调用js内置函数（必须有返回值） 达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1; 可以直接获取Vue实例中定义的数据或函数 例子： <!DOCTYP
Vue插值表达式{{}}
alsdiuhfeircn的博客
06-23 4321
https://blog.csdn.net/ZZY1078689276/article/details/83386834
[Vue学习笔记] 插值 - HTML 标签
GYK0812的博客
01-31 386
使用 {{ 变量 }} 的方式在HTML 中添加值， 此时变量会以字符串的形式显示，那么如果我们想添加的变量对应的是一个 HTML 标签，应该如何操作呢？ <p id="app">Using mustaches: <span v-html="rawHtml"></span></p> <script type="text/javascript"> var vm = new Vue({ el: '#app'
vue绑定background,Vue.js数据绑定风格backgroundImage不起作用
weixin_36200896的博客
12-28 237
I'm trying to bind the src of an image in an element, but it doesn't seem to work. I'm getting an "Invalid expression. Generated function body: { backgroundImage:{ url(image) }".The documentation say...
vue中v-bind常见用法及综合案例：class点击切换
Jolly_zhang的博客
11-07 2043
vue中v-bind常见用法及综合案例：class点击切换
二次线性插值法：阈值设定与应用
二次线性插值法是一种数学插值方法，用于通过有限的已知数据点来估算未知数据点的值。在计算机图形学、图像处理、科学计算以及各种工程领域中都有广泛的应用。二次线性插值法的核心思想是利用局部数据点构造一个二次...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值