绑定属性

最新推荐文章于 2024-04-12 09:37:08 发布
最新推荐文章于 2024-04-12 09:37:08 发布
阅读量452 收藏
点赞数
分类专栏： Vue学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KEY_cheung/article/details/108026957
版权

1 v-bind基本用法，动态绑定属性，例如a元素标签的href属性，img和video元素标签的src属性。语法糖 ‘：’

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-bind基本使用</title>
</head>
<body>
<div id = "app">

  <a v-bind:href="aHref" >百度一下，你就知道</a>
  <img v-bind:src="imgURL" alt="">
  <video v-bind:src="videoURL" controls></video>
  <!--v-bind 的语法糖 ：-->
  <a :href="aHref" >百度一下，你就知道</a>
  <img :src="imgURL" alt="">
  <video :src="videoURL" controls></video>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{

aHref:'http://www.baidu.com',
      imgURL:'……',    <!--自己输入一个图片地址-->
      videoURL:'……'    <!--视频地址-->
    }
  })
</script>
</body>
</html>

 

页面展示：

2.v-bind绑定class（对象语法）

 用法：

  •  直接通过{}绑定一个类

<h2 :class=”{‘active’:isActive}”>hello world </h2>

  •  通过判断，传入多个值

<h2 :class=”{‘active’:isActive,’line’:isLine}”>hello world </h2>

  •  和普通的类同时存在不产生冲突（如果isActive和isLine都为true时，将同时存在title/active/line三个类）

<h2 class=”title” :class=”{‘active’:isActive,’line’:isLine}”>hello world </h2>

  •  如果过于复杂，可以放在一个methods或者computed中（classes是一个计算属性）

<h2 class=”title” :class=”classes”>hello world </h2>

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active{
      color: red;
    }
  </style>
</head>
<body>
<div id = "app">
  <!--<h2 v-bind = "{key1:value1,key2:value2}">{{message}}</h2>-->
  <!--<h2 v-bind = "{类名1:Boolean,类名2:Boolean}">{{message}}</h2>-->
  <h2 :class="{active:isActive,line:isLine}">{{message}}</h2>
  <h2 :class="getClasses()">{{message}}</h2>
  <button v-on:click="btnClink">变色儿</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:"hello",
      isActive:true,
      isLine:true
    },
    methods:{
      btnClink:function () {
        this.isActive = !this.isActive
      },
      getClasses:function () {
        return {active:this.isActive,line:this.isLine}
      }
    }
  })
</script>
</body>
</html>

 

3.v-bind绑定class（数组语法）

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

  </style>
</head>
<body>
<div id = "app">
  <!-- '' 字符串-->
  <h2 class="title" :class="['active','line']">{{message}}</h2>
  <!-- 变量 -->
  <h2 class="title" :class="[active,line]">{{message}}</h2>
  <h2 class="title" :class="getClasses()">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:"hello",
      active:'sssss',
      line:'eeeee'
    },
    methods:{
      getClasses:function () {
        return [this.active,this.line]
      }
    }
  })
</script>
</body>
</html>

 

4.v-bind绑定style（对象语法）

:style="{key(css的属性名):value(css的属性值)}"

注意：当:style中的value不加 ‘’ 时，会被认为时data中的一个变量被解析

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id = "app">
  <!--<h2 v-bind:style="{key(css的属性名):value(css的属性值)}">{{message}}</h2>-->
  <!--当50px不加‘’时，会被认为是data中的一个变量被解析-->
  <h2 v-bind:style="{fontSize:'50px'}">{{message}}</h2>
  <!--data的finalSize中的数据为‘100px’时-->
  <h2 v-bind:style="{fontSize:finalSize}">{{message}}</h2>
  <!--data的finalSize中的数据为100时，这里的finalSize后面要跟上单位-->
  <h2 v-bind:style="getStyles()">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:"hello",
      finalSize:100,
      finalColor:'red'
    },
    methods:{
      getStyles:function () {
        return {fontSize:this.finalSize + 'px',background:this.finalColor}
      }
    }
  })
</script>
</body>
</html>

 

5.v-bind绑定style（数组语法）

   在data中定义好该变量的属性，在:style=”[]”中将变量写入，多个值以 , 分割

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id = "app">
  <h2 :style="[baseStyle1,baseStyle2]">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:"hello",
      baseStyle1:{background:'red'},
      baseStyle2:{fontSize:'100px'}
    }
  })
</script>
</body>
</html>

 

Chueng_to
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 中 avalon绑定属性总结
10-21
首先，avalon的属性绑定可以分为几种类型，包括作用域圈定、双向绑定属性、可见性控制、元素插入移除处理、数据缓存、属性操作、样式操作、事件绑定以及循环操作。 在作用域圈定方面，avalon使用ms-controller来...
python中类和实例如何绑定属性与方法示例详解
12-24
本文将详细讲解如何在Python中为类和实例绑定属性与方法。 首先，我们来看类绑定属性。类属性是在类定义中直接声明的属性，如在`class Student(object): name = 'Student'`中，`name`就是一个类属性。这个属性归类...
属性绑定
weixin_43706224的博客
05-24 566
在herf属性前面写上v-bind就可以把websit这里面的值绑定了， 有时候需要绑定值，有时候需要绑定整个标签，这时候用到v-bind
（7）属性绑定
liuyang___的博客
06-05 246
v-bind指令用法 v-model的本质
02绑定属性
weixin_45595211的博客
04-27 333
一、v-bind的基本使用 v-bind后面是：属性名=，我的理解是表示绑定这个属性，绑定之后，对应的值要去vue的数据里面找。 当我们在控制台改变url时，对应也会变化。相同的，我们还可以绑定图片src属性、超链接的class 通常我们可以将v-bind：简写成：（也就是v-bind的语法糖） 示例代码： <div id="app"> <img v-bind:src="...
4、绑定属性
小刺猬喜歡獨角獸
10-18 277
Vue的bind操作一、v-bind介绍二、v-bind动态绑定class(对象语法)三、v-bind动态绑定class(数组语法)四、v-bind动态绑定style(对象语法) 一、v-bind介绍 除了内容需要动态绑定，某些属性我们也希望动态来绑定 比如动态绑定 a 元素 的 href 属性 比如动态绑定 img 元素 的 src 属性 栗子????： <!DOCTYPE html> <html lang="en"> <head> <meta cha
Spring Boot中的属性绑定的实现
08-26
Spring Boot中的属性绑定实现 概述： Spring Boot中的属性绑定实现是指在Spring Boot框架中，如何将属性文件中的值绑定到配置类中的字段的过程。在本文中，我们将详细介绍Spring Boot中的属性绑定实现，包括@...
05 angular4.x组件 声明属性 绑定数据 绑定属性 数据循环3- toDolist(下).zip
08-13
本课程“05 angular4.x组件 声明属性 绑定数据 绑定属性 数据循环3- toDolist(下)”深入探讨了如何在Angular组件中声明属性、绑定数据以及使用数据循环来呈现列表。下面我们将详细阐述这些关键概念。 1. **组件声明...
Angular2实现自定义双向绑定属性
08-31
本篇文章将深入探讨如何在Angular中实现自定义的双向绑定属性。 首先，我们需要引入必要的Angular模块。`@angular/core`模块包含了Angular的核心功能，其中包括用于组件定义、输入输出属性等的关键装饰器。在组件类...
属性的数据绑定
qq_43137725的博客
12-15 132
属性的数据绑定用到v-bind指令 <input type="text" title="我是title"> 将title属性抽离为变量，标签无法识别为title属性绑定的是字符串还是变量，所以用v-bind来做区分。 v-bind 将冒号里的东西当作js代码来解析，这样msg则成为一个变量： <input type="text" :title="msg"> 如果想在...
属性绑定 v-bind：
binbinhxx的博客
01-07 242
Vue如何动态处理属性？ v-bind指令用法 -<a v-bind:href = 'url'>跳转</a> 缩写形式 -<a :href = 'url'>跳转</a> 使用原生js不仅要涉及到DOM操作还要涉及DOM元素属性的操作，对于原生js来说主要提供了两个原生的API一个是get attribute用来获取属性，另外一个就是set attribute用来设置属性。 JQuery也对应封装了比较方便的方法，对应的Vue也提供了单独的语法规则用来操
数据绑定————属性绑定
“开心最好”的专栏
05-12 1076
       属性绑定指ASP.NET的数据绑定可以绑定到公共的变量、页面属性至服务器端控件的属性上。下面是一个例子,页面设计如下:------------------------------------------------------------------------------------------------------------------------------
vue基础——属性绑定
qq_41929578的博客
10-03 1131
v-bind 属性绑定 作用：动态绑定属性 bind用于绑定一个或多个属性值，比如通过Vue实例中的data绑定元素的URL，代码如下 <div id="app"> <a v-bind:href="url">{{address}}</a> </div> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ url:"http:
『VUE』04. 模板语法-属性绑定（详细图文注释）
MZH
03-29 961
『VUE』04. 模板语法-属性绑定（详细图文注释）
③ Vue基础语法-属性绑定
CRMEB小程序商城的博客
12-16 2425
目录： 初探vue Vue基础语法 - 渲染类型 基础语法上篇学习了Vue渲染数据的三种方式，这一节我们将对这三种方式深入学习！ 属性绑定 何为属性？ 属性指的是Html元素的属性，例如a标签的title就是一个属性！ Vue如何绑定属性？ Vue绑定属性一般是通过v-bind指令来执行，指令不同于{{ message }}双大括号的模板语法，它只能渲染Html内容，不能渲染Html标签的属性，这就是v-bind指令存在的意义！ 语法： v-bind:class="classProperty"
shell中$(( )) 与 $( ) 还有${ }的区别
King's program process
08-03 2156
$( ) 与 ` ` (反引号) 在 bash shell 中，$( ) 与 ` ` (反引号) 都是用来做命令替换用(command substitution)的。 所谓的命令替换与我们第五章学过的变量替换差不多，都是用来重组命令行： * 完成引号里的命令行，然后将其结果替换出来，再重组命令行。 例如： [code]$ echo the last sunday is
Vue绑定属性 绑定Class 绑定style
LuckyBrown的博客
03-29 292
<template> <div id="app"> <h1>{{ msg }}</h1> <br> <!-- 绑定属性 --> <div v-bind:title="title">鼠标移动过来</div> <!-- 在tamplate中引入本地图...
Vue 中 属性绑定 使用场景汇总
最新发布
克里斯蒂亚诺更新的博客
04-12 193
这些场景展示了属性绑定的多样性，可以根据不同的需求动态地绑定各种属性，实现动态、灵活的页面渲染效果。：将父组件的数据动态传递给子组件的 props。：绑定普通的 HTML 元素属性，例如。：根据数据的变化动态设置元素的内联样式。：根据数据的真假动态添加或移除类名。：根据数据的变化动态切换不同的组件。：根据数据的变化动态设置对象的键名。：绑定自定义的 HTML 属性。：根据数据动态绑定事件处理函数。
python动态绑定属性
07-27
在 Python 中，可以通过动态绑定属性来给对象添加新的属性或者修改已有属性的值。动态绑定属性可以通过以下两种方式实现： 1. 使用点运算符（.）：可以通过对象名.属性名 = 值 的方式来动态绑定属性。例如： ```python class MyClass: pass obj = MyClass() obj.new_attr = "Hello, World!" print(obj.new_attr) # 输出：Hello, World! ``` 2. 使用 setattr() 函数：可以使用内置的 setattr() 函数来动态绑定属性。它接受三个参数：对象、属性名和属性值。例如： ```python class MyClass: pass obj = MyClass() setattr(obj, "new_attr", "Hello, World!") print(obj.new_attr) # 输出：Hello, World! ``` 无论是使用点运算符还是使用 setattr() 函数，都可以在运行时动态地给对象绑定新的属性。这种灵活性在一些动态的场景中非常有用。需要注意的是，动态绑定的属性只对当前对象有效，并不会影响到类或其他对象。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值