VUE学习笔记：3.vue的插值操作及v-bind绑定属性

最新推荐文章于 2024-04-11 15:27:39 发布
最新推荐文章于 2024-04-11 15:27:39 发布
阅读量712 收藏 1
点赞数 1
分类专栏： vue学习笔记 文章标签： vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ouyicnm/article/details/117595707
版权

一.插值操作

插值操作就是讲vue实例中的数据渲染到HTML页面标签的内容中。

1.mustache语法

mustache语法是在HTML页面中，需要使用vue数据的地方使用{{key}}的方式来获取vue中的数据的值。

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

<div id="app">
    <h1>{{message}}, 张三</h1>
    <!--mustache语法中可以使用简单的表达式-->
    <h1>{{firstName+ " "+ lastName}}</h1>
    <h1>{{count*2}}</h1>
    <!--html中可以在同一位置引用多个mustache--->
    <h1>{{firstName}} {{lastName}}</h1>
</div>



<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
            message: 'hello!',
            firstName: 'kobe',
            lastName: 'bryant',
            count: 100
        }
    })
</script>
</body>
</html>

结果如下：
在这里插入图片描述

2.v-once指令讲解

在这里插入图片描述

  • 我们知道vue是响应式的，即当我们vue中的数据渲染到HTML页面后，改变vue中的数据，HTML页面的内容也会随机更改。
  • 如果我们希望HTML页面渲染完成后，更改vue中的数据HTML页面的内容不再更改。那么我们可以使用v-once来实现。
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<div id="app">
    <h1>{{message}}</h1>
    <h1 v-once>{{message}}</h1>
</div>



<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
            message: 'hello!'
        }
    })
</script>
</body>
</html>

效果如下：
在这里插入图片描述

3.v-html指令讲解

在这里插入图片描述

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

<div id="app">
    <!--以v-html的格式解析vue中的url内容-->
    <h1 v-html="url"></h1>
</div>



<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
            url: '<a href="https://www.baidu.com">百度一下</a>'
        }
    })
</script>
</body>
</html>

运行效果如下：
在这里插入图片描述

4.v-text指令讲解

在这里插入图片描述

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

<div id="app">
    <h1 v-text="message"></h1>
</div>



<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
            message: 'hello'
        }
    })
</script>
</body>
</html>

效果如下：
在这里插入图片描述
注意：我们推荐使用mustache语法而不是v-text，因为相比于v-text而言mustache更加灵活。

5.v-pre指令讲解

在这里插入图片描述

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

<div id="app">
    <h1>{{message}}</h1>
    <h1 v-pre>{{message}}</h1>
</div>



<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
            message: 'hello'
        }
    })
</script>
</body>
</html>

运行效果如下：
在这里插入图片描述

6.v-cloak指令讲解

我们浏览器在加载页面时，会先加载HTML然后再加载JavaScript。因此在我们的HTML加载完成到JavaScript加载完成的这段时间中，会导致浏览器页面上显示出原始的mustache语法{{}}。这会影响用户体验，我们可以使用v-cloak标签来屏蔽掉这种情况。
在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<style>
    [v-cloak] {
        display: none;
    }
</style>

<div id="app">
    <h1 v-cloak>{{message}}</h1>
</div>



<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
            message: 'hello'
        }
    })
</script>
</body>
</html>

v-cloak实现屏蔽闪烁的原理：

  • 给标签加上v-cloak属性，然后在style中对属性进行设置为display: none;，即不显示标签内容。因此当我们的HTML页面加载完而JavaScript未加载完时，该内容不会显示。
  • Vue.js中对v-cloak做了特殊处理，当Vue检测到该v-cloak属性时，会自动去掉该属性。所以页面中的JavaScript加载完后，该内容又显示出来了。

二.v-bind绑定属性

1.v-bind介绍

在这里插入图片描述

2.v-bind基本使用

语法格式：v-bind:属性名称="data中的key"
简写格式：:属性名称="data中的key"

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<style>
    [v-cloak] {
        display: none;
    }
</style>

<div id="app">
    <!--vue会将imgURL的内容渲染到src属性的值中-->
    <img v-bind:src="imgURL">
    <a :href="URL">百度一下</a>
</div>



<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
            imgURL: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E7%8C%AB%E5%92%AA&hs=2&pn=0&spn=0&di=1320&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=2325464303%2C1389978966&os=3269622072%2C3899409089&simid=3406695896%2C362452050&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=%E7%8C%AB%E5%92%AA&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F9%2F53605fc6be05e.jpg%26refer%3Dhttp%3A%2F%2Fpic1.win4000.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1625472437%26t%3D272a34abde67013bf3d0973e76dacf9d&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Botg9aaa_z%26e3Bv54AzdH3Fowssrwrj6_kt2_9mamm_m_z%26e3Bip4s&gsm=1&islist=&querylist=',
            URL: 'https://www.baidu.com'
        }
    })
</script>
</body>
</html>

3.v-bind动态绑定class属性（对象语法）

在这里插入图片描述
在这里插入图片描述
案例：通过动态的切换class属性，来完成标签字体颜色的改变

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

<style>
    .red{
        color: red;
    }

</style>

<div id="app">
    <!--class后面跟的对象中，如果哪个字段的值为true，则会使用该字段作为属性值-->
    <!--class如果为red，则显示为红色字体，如果为black，则为默认的黑色字体-->
    <h2 :class="{'red': isred, 'black': isblack}">HELLO</h2>
</div>



<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
            isred: false,
            isblack: true
        }
    })
</script>
</body>
</html>

效果如下：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4.v-bind动态绑定class属性（数组语法）

在这里插入图片描述
注意：数组这种方式并不常用，因为使用这种方式和我们直接在代码中写死class="active,line"效果一样。

但是如果我们的class属性值是通过服务器动态的传递过来，那么使用数组语法则是不错的选择。

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

<style>
    .red{
        color: red;
    }

</style>

<div id="app">

    <h2 :class="[active,line]">HELLO</h2>
</div>



<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
            active: "asgffsdg",
            line: "oifdsg"
        }
    })
</script>
</body>
</html>

效果如下：
在这里插入图片描述

5.v-bind动态绑定style属性（对象语法）

在这里插入图片描述

在这里插入图片描述

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


<div id="app">

    <h2 :style="{fontSize: finalsize + 'px',color: finalcolor}">HELLO</h2>
</div>



<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
            finalsize: '100',
            finalcolor: "red"
        }
    })
</script>
</body>
</html>

效果如下：
在这里插入图片描述
注意：使用对象语法来绑定style属性时，对象的key必须是css中的属性名称，不能像class中那样随便定义。

6.v-bind动态绑定style属性（数组语法）

在这里插入图片描述
v-bind动态绑定style属性其本质还是对象，主要用来解决当我们的标签需要使用多个style对象时，可以讲它们放在数组里。

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


<div id="app">

    <h2 :style="[style1,style2]">HELLO</h2>
</div>



<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
            style1: {fontSize: '100px'},
            style2: {color: 'yellow'}
        }
    })
</script>
</body>
</html>

运行效果如下：
在这里插入图片描述

new nm个对象
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
vue3中常用的指令之v-bind和v-on
qq_44482048的博客
01-16 6828
vue3中常用指令之v-bind和v-on
vue3：组件通过绑定对象来绑定属性
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
02-15 1398
新学到的组件透传的方法
Vue3 v-bind绑定css中的var变量实现动态样式
最新发布
秋秋小事
04-11 473
在日常的开发中，我们常常遇到这样的需求：点击一个button改变页面中某个元素的样式，在这样的场景中，我们可以使用v-bind绑定css中的var变量，来动态的切换元素的样式。在setup语法糖环境下，点击一个button动态切换另一个元素的背景色。
vue2 vue3 笔记
weixin_55679970的博客
12-20 569
1. 基本指令 v-bind 操作元素的class列表和内联样式是数据绑定的一个常见需求，所有我们可以使用v-bind处理它们 1. 绑定class介绍 <!-- 1. 对象语法 --> <script> // 绑定class的两种方式，对象语法，数组语法 const isActive = true const classObj = { active: true, title: true } &lt.
03-插值操作（Mustache）与V-bind
PP_zi的博客
07-14 536
一、插值操作 1、Mustache Mustache是胡子，胡须的意思，在Vue中，通过Mustache语法（双大括号）将data中的文本数据插入到HTML中。 Mustache语法可以是简单的语句，也可以是表达式，有很多种写法。 <div id="app"> <h2>{{message}}</h2> <h2>{{message}},熊吱</h2> <h2>{{firstName + ' '
【vue】插值表达式、v-bind、v-on（12.31上午实训）
qq_45746744的博客
12-31 615
1、{{ }} 语法 vue 提供的 {{ }} 语法，专门用来解决 v-text 会覆盖默认文本内容的问题。这种 {{ }} 语法的专业名称是插值表达式 2、 属性绑定指令 v-bind 由于 v-bind 指令在开发中使用频率非常高，因此，vue 官方为其提供了简写形式（简写为英文的 : ）。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title&
Vue.js中用v-bind绑定class的注意事项
10-20
关于数据绑定一个常见...因为它们都是属性，我们可以用 v-bind 处理它们，但是使用v-bind绑定class的时候我们要有一些注意事项，下面这篇文章就给大家分享了下要注意的方面，希望能对大家有所帮助，下面来一起看看吧。
vue里面v-bind和Props 利用props绑定动态数据的方法
10-18
今天小编就为大家分享一篇vue里面v-bind和Props 利用props绑定动态数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
浅析Vue.js中v-bind v-model的使用和区别
10-17
v-model 指令在表单控件元素上创建双向数据绑定,所谓双向绑定。这篇文章主要介绍了Vue.js中v-bind v-model的使用和区别,需要的朋友可以参考下
详解vue中v-model和v-bind绑定数据的异同
10-14
主要介绍了vue中v-model和v-bind绑定数据的异同,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
详解vue中v-bind:style效果的自定义指令
10-15
主要介绍了vue中v-bind:style效果的自定义指令，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
【VUE3】保姆级基础讲解（一）：初体验与指令
qq_54517101的博客
12-06 1173
目录安装和引入CDN本地引入VUE初体验MVVM模型data属性 与 methods属性 VUE基础-模板语法Mustache双大括号语法 v-once指令v-htmlv-prev-cloakv-memov-bind（重要）对象语法 v-bind直接绑定对象 v-on条件渲染v-for基础使用 数组更新监听 key属性 本地引入 打开CDN链接，直接复制代码到本地js文件，再引入html 动态展示，使用data创建函数，return创建的变量，在template中使用插值语法{{}}
Vue3新属性 — css中使用v-bind（v-bind in css）
热门推荐
charlatans的博客
08-11 3万+
v-bind() in css并没有进行劫持或者其他操作，他主要完成的任务是将v-bind()中的内容通过自定义属性的方式进行了重新定义，在编译后代码中可以看到
9.VUE_插值表达式和v-bind
安小静--
11-05 560
1.如果需要直接插入文本值，则需要用{{}}括起来 <template> <div class="p1"> <p>{{name}}{{msg}}</p> </div> </template> <script> export default { name: "hel...
Vue插值的操作和动态绑定属性v-bind
LvBing的博客
06-20 469
模板语法 1.插值的操作 1.Mustache <!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>
Vue之插值表达式，v-bind（单向绑定），v-model（双向绑定）
浩泽学编程的博客
05-23 1727
插值表达式{{…}}v-bindv-model以上就是关于插值表达式、v-bind、v-model的讲解。
Vue3.x（v-bind）属性绑定指令
影子
08-15 1198
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js"></script> <style type="text/css"> .aa{ color: red; } .bb{ background: #ccc; ...
vue3中的v-bind
qq_51976882的博客
02-08 823
v-bind是 Vue.js 中的一个核心指令，用于在 Vue 组件或 DOM 元素上绑定数据属性。它允许你将 Vue 实例中的数据或计算属性绑定到 DOM 元素的属性上。当数据发生变化时，v-bind会自动更新 DOM 元素的属性。v-bind的简写形式是冒号。例如，v-bind:src可以简写为:src。以下是v-bind
Vue指令中的v-bind之动态更改样式
cattleya_ada的博客
09-29 3992
{{}}不能在html属性中使用，我们要采用v-bind绑定属性。 语法：v-bind:属性名，可以简写为:属性名 每个绑定，都只能包含单个表达式。代码如下： &lt;style&gt; .yuan{ width: 100px; height: 100px; border-radius: 50%; background...
在Vue.js中，可以通过v-bind指令来绑定哪些表单属性
05-29
在Vue.js中，可以通过v-bind指令来绑定下列表单属性： 1. value：用于绑定表单元素的值，例如input、textarea等。 2. checked：用于绑定单选框和复选框的选中状态。 3. selected：用于绑定下拉框的选中项。 4. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值