精华内容
下载资源
问答
  • 在标签上绑定属性值,不可以用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-bindv-bind:value的区别

    千次阅读 2020-04-24 16:56:30
    这是v-bind的两种使用方式,使用时最好不要颠倒,其中v-bind=绑定的不是对象时,运行时会报错,v-bind:value=绑定的是对象时,运行没问题,但如果该处html被重写下(比如下拉搜索框中的input值)...
    <!-- 绑定一个有属性的对象 -->
    v-bind=“object.value”
    <!-- 绑定一个属性 -->
    v-bind:value=“value”
    

    这是v-bind的两种使用方式,使用时最好不要颠倒,其中v-bind=绑定的不是对象时,运行时会报错,v-bind:value=绑定的是对象时,运行没问题,但如果该处html被重写下(比如下拉搜索框中的input值),在该页面进行其他操作时(比如【其他的】select点击和input输入),之前绑定的值就会从页面消失。

    展开全文
  • v-bind

    2021-03-01 15:45:42
    v-bind

    v-bind

    在这里插入图片描述

    在这里插入图片描述

    展开全文
  • v-bindv-bind:name 的区别

    千次阅读 2019-08-23 12:02:46
    v-bind 不能多个同用, 后面的才生效 v-bind=“obj” 传入的是键值对 v-bind:name=“value” 传入的是值 v-on 是类似的 v-on 不能多个同用, 后面的才生效 v-on=“obj” 传入的是键值对 v-on:name=“value” 传入的是...

    v-bind 不能多个同用, 后面的才生效
    v-bind=“obj” 传入的是键值对
    v-bind:name=“value” 传入的是值


    v-on 是类似的
    v-on 不能多个同用, 后面的才生效
    v-on=“obj” 传入的是键值对
    v-on:name=“value” 传入的是值

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    		<meta charset="utf-8">
    		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    		<title>v-bind 与 v-bind:name 的区别</title>
    		<style>
    			.components {
    				border: 1px solid #000;
    				padding: 30px;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div id="swq">
    			<box></box>
    		</div>
    		<script type="text/x-template" id="box-template">
    			<div class="components">
    				<div>cBobj{{cBobj}}</div>
    				<div>cBobj2{{cBobj2}}</div>
    				<c-a v-bind="cBobj"></c-a>
    				<c-a v-bind="cBobj" v-bind="cBobj2"></c-a>
    				<c-b v-on="cBfun"></c-b>
    				<c-b v-on="cBfun" v-on="cBfun2"></c-b>
    			</div>
    		</script>
    		<script type="text/x-template" id="cA-template">
    			<div class="components">
    				<div>$attrs{{$attrs}}</div>
    				<div>$props{{$props}}</div>
    			</div>
    		</script>
    		<script type="text/x-template" id="cB-template">
    			<div class="components">
    				<div>查看console.log()</div>
    			</div>
    		</script>
    
    		<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    		<script type="text/javascript">
    			var cA = {
    				template: "#cA-template",
    				props: ["b1"],
    			};
    			var cB = {
    				template: "#cB-template",
    				mounted() {
    					this.$emit("fun1");
    				},
    			};
    			var box = {
    				template: "#box-template",
    				data() {
    					var _this = this
    					return {
    						cBobj: {
    							b1: 1,
    							b2: 1,
    							b3: 1,
    							b4: 1,
    						},
    						cBobj2: {
    							b1: 2,
    							b2: 2,
    							b3: 2,
    							b4: 2,
    						},
    						cBfun: {
    							fun1() {
    								console.log("fun1")
    							},
    							fun2() {
    								console.log("fun2")
    							},
    						},
    						cBfun2: {
    							fun1() {
    								console.log("fun21")
    							},
    							fun2() {
    								console.log("fun22")
    							},
    						},
    					}
    				},
    				components: {
    					"c-a": cA,
    					"c-b": cB,
    				},
    			};
    			var vu = new Vue({
    				el: "#swq",
    				components: {
    					box: box
    				},
    			})
    		</script>
    	</body>
    
    </html>
    

    end

    展开全文
  • v-bind如何绑定,以及v-bind与v-model的区别 今天做一个Demo,使用springboot和vue做模糊查询的时候,想要将搜索框的数据,绑定到data里的user。 想到这里很容易就知道应该使用v-model了,可以进行数据的双向绑定,...
  • dasdclass与style绑定v-bind 1. 绑定HTML Class 对象语法 有些时候我们想动态的切换class的类名。在原生的js或jq中我们就要通过事件来动态的改变class类名,但在vue中我们可以通过v-bind:class 来实现这一功能。...
  • v-click v-bind v-if v-else v-show v-for v-model
  • 8 v-once v-html v-bind v-on

    2020-08-09 20:45:06
    v-once 一次性插入,再次修改无效 v-html 插入html v-bind 绑定属性值,简写用冒号 : 绑定属性值时,v-bind:id=“idname” 等价于 :id=“idname” v-on 绑定事件简写用 @
  • Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性。这篇文章主要介绍了Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on 的相关知识,需要的朋友可以参考下
  • 文章目录前言一、v-bind="props"、v−bind="props"、v-bind="props"、v−bind="attrs"、v-on="listeners"是什么?1. v-bind="$props" 和 $props2.v-bind="$attrs" 和 $attrs3.v-on="listeners"二、代码演示1.index...
  • vue学习06--v-bind:class和v-bind:style

    千次阅读 2017-11-02 18:07:18
    所有代码如下:<!DOCTYPE html> <meta charset="UTF-8"> <title>v-bind - 绑定页面中的元素属性 <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  • ;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;vue 数据绑定&lt;/title&gt; &lt;/head&gt;... 使用(v-bind:) ...img v-bind:src="i
  • 主要介绍了vue.js学习笔记之v-bind和v-on解析,v-bind 指令用于响应地更新 HTML 特征,v-on 指令用于监听DOM事件,文中还给大家提到了v-bind,v-on的缩写,感兴趣的朋友参考下吧
  • vue中v-model和v-bind区别

    万次阅读 多人点赞 2019-05-15 11:18:05
    vue中v-model和v-bind区别 Vue中的数据绑定 绑定数据有三种方式: 插值,也就是{{name}}的形式,以文本的形式和实例data中对应的属性进行绑定 v-bind: v-model: v-bind eg:v-bind:class 可简写...
  • uniapp15---v-bind和v-for的使用

    千次阅读 2020-05-03 04:59:45
    v-bind和v-for的使用 v-bind <image v-bind:src=""></image> 或者<image :src=""></image>
  • v-bind和v-model

    2021-02-08 22:37:31
    一、v-bind v-bind可以动态绑定标签中属性的值,为单向绑定,当data值发生变化时才会变化 例如: <a v-bind:href="url">网络测试</a> //v-bind绑定href。 new Vue({ ... data { url: ...
  • Mustache (双大括号写法...从一开始学习的时候我们就知道v-bind是可以绑定属性和数据的,而v-model也一样可以绑定数据,那么v-bind和v-model的区别在哪里? 1:如果 id={{xxx}}这种写法,则HTML实际上是这样的:id=”{{
  • v-bind绑定class、style 除了数据的动态实现,我们知道渲染的时候样式是必不可少的,接下来介绍vue中如何动态的使用v-bind绑定元素类名class,style来动态的给dom节点添加和修改删除样式。 v-bind绑定class //v-bind:...
  • 之前看了一篇关于Vue开发技巧的文章,其中提到了在写高级组件时,通过v-bind="$props"将props一次性向下传递。这种向下传递的方式我之前没有用过,便看了下官网的介绍,并补充了一些相关API用法,在这里记录一下,方便自己...
  • v-text v-cloak v-html v-bind v-on :@ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,454
精华内容 6,581
热门标签
关键字:

v-bind