v-bind指令——03

v-bind 指令详解:

1 、这个指令是干嘛的?

可以让html标签的某个属性的值产生动态的效果

2、v-bind指令的语法格式:<HTML 标签 v-bind : 参数 = “表达式”> </HTML>

3、v-bind指令的编译原理:

编译前:<HTML 标签 v-bind : 参数 = “表达式”> </HTML>

编译后:<HTML 标签 参数 = “表达式”> </HTML>(以参数作为HTML的属性名)

注意两项:

1.在编译的时候v-bind后面的“参数名”会被编译为HTML标签的“属性名

2.表达式会关联data,当data发生改变之后

  1. v-bind 很常用表格,所有vue框架对该指令提供了一种简写方式:

只是针对v-bind 提供了以下简写方式:<img : src = " imgPath"><br>

5.什么时候使用插值语法? 什么时候使用命令

凡事标签体中的内容要想动态,需要使用插值语法。只要想让HTML标签的属性动态,需要使用指令语法

<body>

<div id ='app'>

//注意:1、以下代码中msg是变量名

2、原则上v-bind指令后面的这个参数名可以随便写

3、虽然可以随便写,但大部分情况下,这个参数名还是需要写成改HTML标签支持的属性名,这样才会有意义

<span v-bind : abc =“msg”></span>

<span v-bind : abc =“ 'msg ' ”></span> //这个表达式带有单引号,这个‘msg’就不是变量,是常量

v-bind实战:

<img src=“../img/1.png”><br>

<img v-bind : src = " imgPath"><br>

v-bind简写形式

<img : src = " imgPath"><br>

这是一个普通的文本框

<input type =“text” name=“username” value=“zhangsan”><br>

以下文本框可以让value这个数据变成动态的这个就是典型的动态数据绑定

<input type =“text” name=“username”: value=“zhangsan”><br>

使用v-bind也可以让超链接的地址动态

<a href="https://element-plus.org/zh-CN/component/dialog.html">点击</a><br>

<a :href="url">单机</a> <br>

不能采用以下写法:

<a href = "{{url}}">点击吧</a>// 属性内部插值这种语法已经被移除了,可能vue以前的版本中是支持这种写法的,但是现在不允许了。

请使用v-bind冒号速记来代替。请使用<div id= "val">来代替

</div>

<script>

new Vue ({

let i=100;//赋值的过程就可以看做是一种绑定的过程

el : '#app'

data(){

msg : ' qwert'

imgPath : "abc"

username= : 'https://element-plus.org/zh-CN/component/dialog.html' ,

url : 'https:'

}

})

</scirpt>

</body>

相关推荐

  1. v-bind指令——03

    2024-07-12 05:32:01       28 阅读
  2. Vue常用指令v-bind

    2024-07-12 05:32:01       47 阅读
  3. 第3节:Vue3 v-bind指令

    2024-07-12 05:32:01       57 阅读
  4. bind更改this指向问题

    2024-07-12 05:32:01       39 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-12 05:32:01       67 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-12 05:32:01       71 阅读
  3. 在Django里面运行非项目文件

    2024-07-12 05:32:01       58 阅读
  4. Python语言-面向对象

    2024-07-12 05:32:01       69 阅读

热门阅读

  1. 【C++】CMake入门

    2024-07-12 05:32:01       22 阅读
  2. C# - 异步编程和同步编程总结

    2024-07-12 05:32:01       25 阅读
  3. 微服务中的 “服务发现机制” 简介

    2024-07-12 05:32:01       25 阅读
  4. Vuetify3 + Nuxt3:跳转详情

    2024-07-12 05:32:01       23 阅读
  5. Django ORM中ExpressionWrapper的用途

    2024-07-12 05:32:01       22 阅读
  6. 【算法】反转链表

    2024-07-12 05:32:01       27 阅读
  7. NoSQL之REDIS配置与优化

    2024-07-12 05:32:01       20 阅读
  8. 阿里云API安全2.0全新发布

    2024-07-12 05:32:01       24 阅读
  9. (三)大模型/人工智能/机器学习/深度学习/NLP

    2024-07-12 05:32:01       19 阅读
  10. 数据库常见问题(持续更新)

    2024-07-12 05:32:01       25 阅读