精华内容
下载资源
问答
  • v-bind使用方法
    千次阅读
    2018-03-09 19:23:29

    v-bind是绑定一个属性,也可以是属性值


    更多相关内容
  • 今天小编就为大家分享一篇vue里面v-bind和Props 利用props绑定动态数据的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了vue基础之v-bind属性、class和style用法,结合实例形式分析了vue.js中v-bind绑定及class、style样式控制相关操作技巧,需要的朋友可以参考下
  • v-bind的基本用法 一、本节说明 前面的章节我们学习了如何向页面html标签进行插值操作,那么如果我们想动态改变html标签的属性,该怎么办呢? 这就是我们这节开始要讲的内容v-bind. 二、 怎么做 “:”为v-bind的...
  • //vue中的选项卡的实现,数据驱动dom,因此需要使用数据,来改变class; 详细见代码实现 <style> ul{overflow: hidden;} ul li{float: left;width: 150px;height: 35px;line-height: 35px;border: 1px solid ...
  • 在标签上绑定属性值,不可以用Mustache语法,也就是{{ }},必须使用v-bind来绑定属性,v-bind的格式是 v-bind:标签属性名 或者语法糖形式 :标签属性名 代码中展示了 v-bind:src 、v-bind:href 、v-bind:class —对于...

    码云实时更新学习demo地址:https://gitee.com/dxl96/vuexuexi

    VUE基础篇(插值操作)

    1、v-bind

    在标签上绑定属性值,不可以用Mustache语法,也就是{{ }},必须使用v-bind来绑定属性,v-bind的格式是 v-bind:标签属性名
    或者语法糖形式 :标签属性名
    代码中展示了 v-bind:srcv-bind:hrefv-bind:class
    —对于 v-bind:src 、v-bind:href来说 可以绑定data中的变量,也可以绑定方法,方法返回的值就是绑定的值
    —对于 v-bind:class 来说:
    1)可以绑定对象,可以绑定对象的形式,{属性1:boolean,属性2:boolean …}这种形式,我们通过动态绑定这些布尔值,如果布尔值是true的话,说明就会绑定到这个对象的属性名,如果是false的话就不会绑定这个对象的属性名。
    举例:比如这里,{active: isActive,line: isLine} 假设active的值(isActive)是true,那么class这个标签属性就有active这个值,也就是class=“active”;假设 active的值和line的值都为true,那么就是class=“active line”;如果其中active的值为true,line的值为false,那么class=“active”
    2)还可以写成绑定数组的形式,这种形式[‘active’,‘line’]
    3)还可以绑定方法,方法返回对象或者数组,也就是上两种形式的数据

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>vue动态绑定</title>
      <style>
        img {
          height: 60px;
        }
    
        .active {
          color: red;
        }
      </style>
    </head>
    <body>
    
    <div id="app">
      <!--  ■错误写法,不能再标签上使用mustache语法,不能够识别-->
      <!--  <img src="{{imgURL}}">-->
    
      <!--  ■正确做法,使用v-bind指令,来进行值的动态绑定,也就是值的替换-->
      <img v-bind:src="imgURL"/>
      <a v-bind:href="aHref">百度一下</a>
      <!--  ■也可以绑定方法,方法返回一个需要的值-->
      <img v-bind:src="getImgUrl()"/>
      <a v-bind:href="getHref()">百度一下</a>
    
      <!--  ■v-bind指令语法糖的写法,用 : 替代 v-bind: -->
      <img :src="imgURL"/>
      <a :href="aHref">百度一下</a>
    
      <!------------------------------------------------------------------------------------------------------------------------------->
    
    
      <!--  ■绑定数据可以和原标签属性值共存,vue会解析合并绑定的值和原来的值,假如原标签的属性值只能是一个,比如href这种,要是绑定语法和原语法都存在,则原标签生效-->
      
      <!--  ■v-bind:class绑定可以绑定对象的形式,{属性1:boolean,属性2:boolean ...}这种形式,我们通过动态绑定这些布尔值,如果布尔值是true的话,说明就会绑定到这个对象的属性名,
              如果是false的话就不会绑定这个对象的属性名
              举例:比如这里,{active: isActive,line: isLine} 假设active的值(isActive)是true,那么class这个标签属性就有active这个值,也就是class=“active”;假设
              active的值和line的值都为true,那么就是class=“active line”;如果其中active的值为true,line的值为false,那么class=“active”
      -->
      <h2 v-bind:class="{active: isActive,line: isLine}">{{message}}</h2>
    
      <!--  ■将上面这种直接绑定对象的方式,还可以改成绑定方法,方法中返回这个对象即可-->
      <h2 v-bind:class="getClass()">{{message}}</h2>
    
      <!--  ■还可以写成绑定数组的形式,同样的,也可以像上面绑定方法,方法返回数组-->
      <!--  绑定数据和原来的属性数据可以同时使用,它会将绑定的和原来的进行解析合并,比如这里,就会是class=“title active line”-->
      <h2 class="title" v-bind:class="['active','line']">{{message}}</h2>
    
      <!--  ■将上面这种直接绑定数组的方式,还可以改成绑定方法,方法中返回这个数组即可-->
      <h2 class="title" v-bind:class="getClass2()">{{message}}</h2>
      
      <!--  ■监听点击事件-->
      <button v-on:click="btnClick">点击一下</button>
    </div>
    
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "vue app",
          imgURL: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1590919517&di=f0e49723a8334e9576244d9736cf81a5&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg",
          aHref: "http://www.baidu.com",
          isActive: true,
          isLine: true
        },
        methods: {
          btnClick: function () {
            // 当点按钮时切换isActive的值取反,也就是true和false交替赋值
            // 当该值改变时,也就意味着上面绑定了这个值的h2标签的class属性交替存在去除active这个值
            // 因为上面css已经对class含有active的标签进行设置字体颜色为红色,所以我们在点击按钮时就能够看到h2标签里的内容红色和黑色之间交替变换
            this.isActive = !this.isActive
          },
          getClass: function () {
            return {active: this.isActive, line: this.isLine};
          },
          getClass2:function(){
            return ['active','line']
          },
          getHref: function () {
            return "http://www.baidu.com"
          },
          getImgUrl: function () {
            return "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1590919517&di=f0e49723a8334e9576244d9736cf81a5&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg"
          }
        }
      });
    </script>
    </body>
    </html>
    

    效果
    在这里插入图片描述

    2、动态绑定style

    v-bind:style 或者 语法糖形式 :style
    可以绑定数据的方式有:
    1)对象
    2)数组
    3)方法(方法返回对象或者数组)

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>动态绑定style</title>
    </head>
    <body>
    
    <div id="app">
    
      <!--  ■v-bind:style 绑定style ,以绑定对象的形式进行绑定 {key(属性名):value(属性值)} 属性名的形式可以是小驼峰的形式,也可以是原名称以-分割的形式-->
      <h2 :style="{fontSize:finalSize,color:color}">{{message}}</h2>
      <!--  ■如果是直接进行赋值的话,必须以单引号包裹起来,否则它会认为这是个变量去解析,然后就会找不到这个变量,就像这里的 50px 用单引号包裹表示他是一个值-->
      <h2 :style="{fontSize:'50px'}">{{message}}</h2>
      <h2 :style="{fontSize:finalNum+'px',backgroundColor:'red'}">{{message}}</h2>
      <!--  ■也可以调用方法的方式返回对象的形式进行绑定-->
      <h2 :style="getStyle()">{{message}}</h2>
      <!--  ■也可以是数组的形式来进行数据绑定-->
      <h2 :style="[backGround,fontSize]">{{message}}</h2>
      <!--  ■也可以调用方法的方式返回数组的形式进行绑定-->
      <h2 :style="getStyle2()">{{message}}</h2>
    </div>
    
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "vue app",
          finalSize: "50px",
          finalNum: 50,
          color: 'red',
          backGround: {backgroundColor: "red"},
          fontSize: {fontSize: "50px"},
        },
        methods: {
          getStyle: function () {
            return {fontSize: this.finalSize}
          },
          getStyle2: function () {
            return [{backgroundColor: "red"},{fontSize: "50px"}]
          }
        }
      });
    </script>
    </body>
    </html>
    

    效果
    在这里插入图片描述

    展开全文
  • v-bind用法详解

    2022-04-11 10:56:10
    你真的了解v-bind吗?看完这篇文章你会对v-bind的更多用法有所了解。

    引言

    你真的了解v-bind吗,它的api其实挺多的,如果你没有仔细看完官网,恐怕只知道v-bind是用来绑定值可变的属性。如果不愿意看官网的小伙伴或者是觉得官网晦涩难懂,看完我这篇文章,你会熟悉更多关于v-bind的使用。

    详细用法

    1.当元素的属性值要求为变量时,我们可以使用v-bind来修饰属性

    2.v-bind修饰的属性值里,可以写js表达式

    3.当 v-bind的属性值为对象时会将对象展开作为标签的属性,优先级要注意,v-bind赋予的属性优先级始终最低

    <div id=2 v-bind="{id:1,name:box}">hhh</div>
    
    <!--以上写法相当于-->
    <div id=2 name='box'>hhh</div>
    

    4.修饰符:

    .prop - 作为一个 DOM property 绑定而不是作为 attribute(HTML property) 绑定。其中差异看下文。

    .camel - 将 kebab-case attribute 名转换为 camelCase。

    .sync - 自定义事件的语法糖,会扩展成一个更新父组件绑定值的 v-on 侦听器。下面有例子说明。

    表达式的使用

    <div :key='Math.random()+Date.now()'></div>
    

    dom属性和html属性的差异

    <body>
    <input type="text" value="1" >  
    <button>get value</button>
    
    <script>
    const input=document.querySelector('input')
    document.querySelector('button').addEventListener('click',function(){     //输入2后点击按钮
        console.log(input.value)    //读取dom属性 ,2
        console.log(input.getAttribute('value'))     //读取html属性 ,1
    })
    </script>
    </body>
    

    .sync修饰符的使用

    使用场景:如果子组件也需要更新v-bind绑定的属性,使用该修饰符可以省去订阅(自定义事件监听)的代码。注意:这个只能在vue2中使用,vue3中是被摈弃了

    this.$emit('update:title', newTitle)    // 子组件发布信息,'update:prop'是规定写法
    

    然后父组件可以监听那个事件并根据需要更新一个本地的数据 property。例如:

    <text-document
      v-bind:title="doc.title"
      @update:title="doc.title = $event"    <--此时 $event 是收到的参数-->
    ></text-document>
    

    以上写法等同于下面

    <text-document v-bind:title.sync="doc.title"></text-document>
    

    作为展开属性用法的变化

    采用对象的覆盖形式,更符合人的思维方式

    <!--vue2.x-->
    <div color='blue' v-bind="{color:'red'}">hh</div>
    <!--以上相当于-->
    <div color='blue' >hh</div>
    
    <!--vue3.x-->
    <div v-bind="{color:'red'}" color='blue'>hh</div>
    <!--以上相当于-->
    <div color='blue' >hh</div>
    

    结尾

    总之,v-bind相对于其他指令的用法还算挺多的。最后,感谢大家的观看,希望这篇文章能给你们带来一些帮助,如果有小伙伴有一些疑问或者建议,欢迎提出和分享。

    展开全文
  • v-bind使用

    千次阅读 2020-06-21 22:03:27
    一、v-bind基本使用 有时候属性也不是写死的,也是需要根据某些变量某些数据动态来决定的。 比如动态绑定a元素的href属性 比如动态绑定img元素的src属性 比如动态绑定一些类、样式 这个时候,我们可以使用v-bind指令...

    一、v-bind基本使用

    有时候属性也不是写死的,也是需要根据某些变量某些数据动态来决定的。

    比如动态绑定a元素的href属性
    比如动态绑定img元素的src属性
    比如动态绑定一些类、样式

    这个时候,我们可以使用v-bind指令。
    在这里插入图片描述
    v-bind用于绑定一个或多个属性值,或者向另一个组件传递props值

    <div id="app">
    		<!-- 不能使用mustache语法 把imgURL直接当成字符串 在内容里面才能使用-->
    		<!-- <img src="{{imgURL}}" alt=""> -->
    		<img v-bind:src="imgURL" alt="">
    		<a v-bind:href="aHref">百度一下</a>
    		<a :href="aHref">百度一下</a>
    	</div>
    
    	<script src="../js/vue.js"></script>
    
    	<script>
    		const app = new Vue({
    			el: '#app',
    			data: {
    				message: 'nihao',
    				imgURL:'https://m.360buyimg.com/babel/jfs/t1/49107/14/3176/6019/5d0eea59E238562fd/2576bcda7fc37edd.jpg',
    				aHref:'http://www.baiu.com'
    			}
    		})
    	</script>
    

    二、v-bind绑定class

    很多时候,我们希望动态的来切换class,比如:
    当数据为某个状态时,字体显示红色。
    当数据另一个状态时,字体显示黑色。

    绑定class有两种方式:
    对象语法
    数组语法

    对象语法动态绑定class

    对象语法的含义是:class后面跟的是一个对象。

    .active{
    	color:red;
    }
    
    <div id="app">
    	<h2 :class="active">{{message}}</h2>
    </div>
    
    <script>
    const app = new Vue({
    	el: '#app',
    	data: {
    		message: 'nihao',
    		active:'active'
    	},
    }
    
    <h2 v-bind:class="{key:value}">{{message}}</h2>
    <h2 v-bind:class="{类名:boolean}">{{message}}</h2>
    <h2 v-bind:class="{active:true,line:false}">{{message}}</h2>
    

    boolean值为true的时候,类就被添加。
    一般把boolean值放到data中

    <h2 v-bind:class="{active:isActive,line:isLine}">{{message}}</h2> 
    
    data: {
    	message: 'nihao',
    	isActive:true,
    	isLine:true
    },
    

    如果过于复杂,可以放在一个methods或者computed中

    <h2 v-bind:class="getClasses()">{{message}}</h2>
    <button v-on:click="btnClick">按钮</button>
    
    methods:{
    	getClasses: function () {
    		return { active: this.isActive, line: this.isLine };
    	},
    	btnClick:function(){
    		this.isActive=!this.isActive;
    	},
    }
    

    数组语法动态绑定class

    数组语法的含义是:class后面跟的是一个数组。

    <h2 class="title" :class="['active','line']">{{message}}</h2>
    <!-- 没有单引号,是变量 -->
    <h2 class="title" :class="[active,line]">{{message}}</h2>
    

    三、v-bind绑定style

    我们可以利用v-bind:style来绑定一些CSS内联样式。

    我们可以使用驼峰式 (camelCase) fontSize
    或短横线分隔 (kebab-case,记得用单引号括起来) ‘font-size’

    <h2 :style="{key:value}">{{message}}</h2>
    <h2 :style="{属性名:属性值}">{{message}}</h2>
    <!-- 如果不加单引号,则是变量 -->
    <h2 :style="{fontSize:'50px'}">{{message}}</h2>
    <h2 :style="{fontSize:finalSize,color:finalColor}">{{message}}</h2>
    <h2 :style="getStyles()">{{message}}</h2>
    
    data: {
    	message: 'nihao',
    	finalSize:'100px',
    	finalColor:'red'
    },
    methods:{
    	getStyles:function(){
    		return { fontSize: this.finalSize, color: this.finalColor }
    	}
    }
    
    展开全文
  • 1、v-bind 1、基本使用 在开发的时候,有时候我们的属性不是写死的,有可能...这时可以使用v-bind指令:  作用:动态绑定属性;  缩写(语法糖):: (只用一个冒号代替); v-bind有一个对应的语法糖,也就是...
  • 本篇文章主要介绍了详解VUE中v-bind的基本用法 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • v-bind如何绑定,以及v-bindv-model的区别 今天做一个Demo,使用springboot和vue做模糊查询的时候,想要将搜索框的数据,绑定到data里的user。 想到这里很容易就知道应该使用v-model了,可以进行数据的双向绑定,...
  • v-bind的高级用法

    2019-10-28 22:13:21
    总结一些,开发过程中,常见的用法
  • 二、vue中v-bind使用

    2022-03-22 17:37:49
    一、v-bind基本使用 一个页面中,除了标签内容需要动态绑定外,标签的属性也需要动态绑定,例如:a元素的href属性和img元素的src属性。这时就需要用到v-bind了。 <body> <div id="app" > <!-- 动态...
  • v-bind指令大家一定很熟悉,簡單來講就是給組件綁定屬性,但是 大家是不是很多少用到綁定對象,有人說,設置class 時我就是綁定對象,你說的很對,但是不是我想說滴 參考資料 v-bind
  • Vue中的v-bind指令基本用法和介绍

    千次阅读 2021-05-25 12:16:13
    Vue中的v-bind指令基本用法和介绍 v-bind指令主要用于响应式的更新html属性 一般我们要想在元素节点的属性上绑定vue的data数据 是不可以直接使用{{ }}插入值语法来使用 <h1 title="{{tit}}">Hello World</...
  • VUE中 v-bind 用法

    2018-05-24 09:13:00
    Vue.js学习笔记:属性绑定 v-bind v-bind 主要用于属性绑定,Vue官方提供了一个简写方式 :bind,例如: <!--完整语法--> <av-bind:href="url"></a> <!--缩写--> <a:href="url">...
  • Vue的v-bind用法

    2018-11-18 12:16:06
    我们可以通关用v-bind来绑定class或者id来控制css样式 1、绑定单个class来匹配css // css部分 .fcss{ color:red } &lt;div v-bind:class="first"&gt; &lt;/div&gt; 解释一下就是绑定...
  • vue中v-bind的简单使用

    千次阅读 2021-02-03 14:35:27
    v-bind基础 v-bind用于绑定一个或多个属性值,或者向另一个组件传递props值(这个学到组件时再介绍) 在开发中,有哪些属性需要动态进行绑定呢? 还是有很多的,比如图片的链接src、网站的链接href、动态绑定一些...
  • 1.可以绑定标签属性 ...a v-bind:href="url"&gt;&lt;/a&gt; &lt;/div&gt; &lt;script type="text/javascript"&gt; var app = new Vue({ el:
  • Vue之v-bind基本使用

    千次阅读 2020-06-22 17:54:31
    v-bind基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!--错误的...
  • v-bindv-on的使用

    2021-01-15 16:40:55
    v-bind:绑定属性值,内容相当于js,缩写: ...这样显示的title是固定的,我想使用Vue的data里面的值,就需要加v-bind指令 <input type="button" value="按钮" v-bind:title="title + '---' +'相当于js'">&l.
  • 下面我们使用Vue的v-bind绑定class v-bind动态绑定class 对象语法绑定(常用) red和size的值为true就在class显示red和size,false就不显示。下面有两种写法: <style> .red{ color: red; } .size{ font...
  • msg2:“哈哈哈”}})v-cloak:解决闪烁问题当网速较慢时,vue加载较慢,插值表达式渲染的数据就会产生闪烁,使用v-cloak指令加上如上样式可以解决该问题v-text:插入文本字符串v-text默认就没有闪烁,但是会以文本...
  • <Input placeholder="请输入...对于输入框input标签,如果把v-model替换成v-bind,此时在输入框中重新输入其他值,searchItem也拿不到新的输入内容 所以总结如下应用场景: v-bind: 用于修改html元素值,...
  • Vue中Class和Style几种v-bind绑定的用法-详解案例

    千次阅读 多人点赞 2021-05-14 14:14:59
    除了设置 class 我们在项目中也经常设置元素的内联样式 style,在 jquery 时代我们大多数都是利用 addClass 与 removeClass 结合使用来处理 class 的添加/删除,利用 css() 方法设置/获取元素的内联样式。...
  • vue — 使用v-bindv-on实现v-model v-model其实是一个语法糖,他的背后本质包含两个操作:1.v-bind绑定一个value属性2.v-on指令给当前元素绑定input事件 实现步骤如下:① 通过v-bind实现,若修改app.message,则...
  • Vue:v-on、v-bindv-model用法

    千次阅读 2019-06-04 11:33:50
    一般v-on:click 可以缩写为 @click,其中@代表v-on: 示例:例如我们在HTML的body中加入一个绑定了事件的button <div id="app"> <button v-on:click="onClick">点击这里</button> </div>...
  • 由于v-bind支持v-bind="obj"的用法(其中obj为一个对象,譬如obj = {class: class1, style: style1}),若你传入的obj为一个数组,比如为obj = ['a', 'b', 'c'],那么obj会将其解析为{'0': 'a', '1': 'b', '2': 'c'}...
  • v-bind使用和注意点

    2021-11-09 10:57:25
    v-bind:可以为元素的属性绑定一些数据 <div id="app"> <p v-bind:title="message" v-bind:id="pId">我是p标签</p> </div> <script src="./js/vue.js"></script> &...
  • v-bind的基本使用

    2021-03-22 21:53:43
    v-bind的基本使用 作用:动态绑定数据 缩写:: 某些属性我们需要动态绑定,例如图片资源或者链接等。 例如: <a :href="link">CSDN</a> <img :src="imgUrl">CSDN</img> var app = new Vue...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 115,876
精华内容 46,350
关键字:

v-bind的用法