Vue框架学习笔记——指令语法：v-bind动态绑定属性、data的层级结构

╰半夏微凉° 2024-02-18 13:10 33阅读 0赞

#### 文章目录 ####

*  指令语法
 *   *  v-bind，增加标签内属性动态绑定方式
 *  data的层级结构

--------------------

## 指令语法 ##

在标签中想让属性动态变化的时候，不能使用插值语法。  
插值语法一般用于标签体中，当针对标签的里面的时候，例如标签属性，就可以使用指令语法

### v-bind，增加标签内属性动态绑定方式 ###

{
       {name}}

需要写成类似这样的代码

<a v-bind:href="url">百度</a>

通过v-bind将这个属性动态绑定，将""字符串内的作为js表达式  
v-bind也可以简写为

<a :href="url">百度</a>

## data的层级结构 ##

<div class="box" id="box">
        <h1>
          {
       {school.name}}hello,world{
       {name}}
        </h1>
        <a :href="url">百度</a>
      </div>
      <script type="text/javascript">
        Vue.config.productionTip = false
    
        new Vue({
          
          el: '#box',
          data: {
          
            name: "这里是name的值",
            url: "http://www.baidu.com",
            school: {
          
              name: "层级"
            }
          }
        })
      </script>

![在这里插入图片描述][ea7dba032dfb4552895b3f9d6ea31dc3.png]

--------------------

至此，结束。

`如果你觉得这篇文章写的不错，多多点赞~收藏吧！`

[ea7dba032dfb4552895b3f9d6ea31dc3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/fc4ff22ba6194c8d9e5de3e55e6a197e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，33人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue：属性绑定

Vue：属性绑定

喜欢ヅ旅行/ 2024年04月23日 12:44/ 0 赞/ 100 阅读

相关 Vue框架学习笔记——指令语法：v-bind动态绑定属性、data的层级结构

文章目录指令语法 v-bind，增加标签内属性动态绑定方式 data的层级结构 -------------------- 指令语法在

╰半夏微凉°/ 2024年02月18日 13:10/ 0 赞/ 34 阅读

相关 Vue框架学习笔记——绑定class样式和绑定style样式

文章目录前文提要 class样式的三种绑定方法（图片来自参考链接） style样式（内联形式）总结 --------------------

灰太狼/ 2024年02月17日 11:19/ 0 赞/ 60 阅读

相关 VUE框架指令语法与v-bind实现标签属性内部动态------VUE框架

> > > <!DOCTYPE html> > <html lang="en"> > <head> > <meta charse

深碍√TFBOYSˉ_/ 2024年02月06日 04:54/ 0 赞/ 50 阅读

相关 VUE_vue动态绑定style属性

方式一：  <div :style="{ height: `${ statusBarHeight}px

妖狐艹你老母/ 2022年12月27日 12:50/ 0 赞/ 220 阅读

相关 vue 属性绑定

<!DOCTYPE html> <html> <head> <meta charset="utf-8" />

淩亂°似流年/ 2022年05月31日 10:17/ 0 赞/ 260 阅读

相关 Vue绑定属性绑定Class 绑定style

vue是如何绑定属性和class以及style的下面我将会插入一段代码，本人在代码里做了相当详细的注释。 <template> <!-- v

待我称王封你为后i/ 2022年03月25日 09:36/ 0 赞/ 467 阅读

相关 vue属性绑定

一、功能 1、界面有一个段落，文字显示为”这是一个段落" 2、鼠标移到段落上，提示“这是段落的提示” 二、实现 <!DOCTYPE html>

ゝ一纸荒年。/ 2022年02月04日 01:53/ 0 赞/ 343 阅读

相关 VUE 基础语法：属性、指令、数据绑定

vue基本语法 `el`绑定元素id； `data`数据，可以在绑定元素内使用； `{ { data中的key }}`Mustache语法，通过此方式绑定数据；

た入场券/ 2021年11月29日 07:26/ 0 赞/ 265 阅读

相关 Vue.js学习笔记：属性绑定 v-bind

v-bind 主要用于属性绑定，Vue官方提供了一个简写方式:bind，例如：  <a v-bind:href="url"></a

╰+攻爆jí腚メ/ 2021年09月14日 01:20/ 0 赞/ 215 阅读