vue.js学习笔记之属性绑定 v-bind

最新推荐文章于 2024-05-10 18:15:56 发布
最新推荐文章于 2024-05-10 18:15:56 发布
阅读量3k 收藏
点赞数 1
分类专栏： 手机跨平台应用开发记录笔记 文章标签： v-bind vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_35103712/article/details/57126521
版权

vue.js中有许多的指令，其中属性绑定的是v-bind。

v-bind可以绑定src,style,class

一、地址绑定

HTML代码：

<body>
    <div id="srcbind">
           <a v-bind:href="src"> yovan's CSDN Blog  </a>
    </div>
</body>
js代码： 

<script>
    let me = new Vue({
        el:"#srcbind",
        data:{
            src:"http://blog.csdn.net/weixin_35103712"
        }

    })
</script>

网页编译后的代码是： 
<a href="http://blog.csdn.net/weixin_35103712"> CSDN blog </a>
二、样式绑定

HTML代码：

<body>
    <div id="stylebind">
        <p v-bind:style="style">
      		Hello,I am {{myname}}
	</p>
    </div>
</body>
js代码： 

<script>
    let me = new Vue({
        el:"#stylebind",
        data:{
            myname:"yovan",
            style:{
                color:"blue",
                'font-size':"20px"
            }
        }

    })
</script>

值得 注意 的是：样式绑定的时候，有的属性是有带“-”符号的，比如js代码中的font-size，如果直接写会报错 （ Uncaught SyntaxError: Unexpected token - ）， 这时，有两种解决方法：1、我们需要将font-size给加 单引号 -->'font-size'；2、可以用 驼峰命名法 解决，如fontSize。


至于v-bind的绑定class的，暂时还没接触到，后续接触会继续更新......



yooovan
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
04-Vue-绑定属性
m0_57103348的博客
08-30 980
(1)对class 属性进行绑定。前面为属性名，后面没加冒号表示。数组表示多类名：字符串、变量。(2)对style 进行绑定。对象表示布尔显示：属性值为。数组样式，多个、混合性样式。事件操作，显示和隐藏盒子。，注意属性为样式属性名。...
vue.js v-bind绑定class 官方文档提炼
⭐星星的博客
06-08 121
v-bind绑定class 官方文档提炼 v-bind绑定class有两种语法，1.数组语法2.对象语法；其中 数组语法是包含对象语法的 对象语法 v-bind:class="{ active: isActive, 'text-danger': hasError }" 双引号里面是一个对象 属性名即预备的css类 其值为真值 则应用这个类 同时 它(classObject)也可也传一个返回如对象...
v-bind详解
热门推荐
张木期的博客
07-23 3万+
v-bind就是用于绑定数据和元素属性的 var app = new Vue({ el:'.app', data:{ url:"https://www.baidu.com", } }); <div class="app"> <a v-bind:href="url">click me</a> </div> 注意： v-bind后面是：属性名=，我的理解是表示绑定这个属性，绑定之后，对应的值要去vue的数据里面
VUE基础--属性绑定
qq_62799602的博客
01-12 619
双括号“{{}}”无法再HTML attributes中使用，想要响应式地绑定一个attribute，需使用指令vue-demo1项目搭建完成后，创建一个src/components/Hello.vue项目在src/App.vue中将Hello.vue进行引入编写以下内容，并查看页面中element（元素）里的内容，发现vue属性已绑定效果显示如下：当引入的属性值为或时，在页面中的element将不会显示。
第六节:Vue指令:v-bind动态属性绑定
最新发布
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
05-10 1113
上一小节的学习,让我们理解以v开头的指令后面跟的将是表达式,同样标签也有一些合法的标签属性.如果想将这些属性的值变为表达式,我们可以使用Vue提供的v-bind:指令.因为动态属性style的值是一个对象,因此 我们可以把对象提取出来直接作为vue 数据data属性值,那么我们就可以直接绑定一个对象就可以了。动态绑定class 就是使用v-bind指令来绑定, 一但使用v-bind指令后,class属性的值不在是一个字符串,而是一个表达式,但是一旦使用了动态绑定, `style`属性的值将变成JS表达式,
v-bind
hq520hq的博客
09-13 1266
v-bind 主要用于属性绑定，比方你的class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定，v-bind就是用于绑定数据和元素属性的。v-bind指令给“任意标签”的“任意属性”绑定数据，对于大部分的属性而言我们只需要直接赋值即可，例如：:value=“name”，但是对于class和style属性而言，它的格式比较特殊。在html代码中，v-bind绑定的是动态的表达式，而非固定的字符串，在v-bind后，就可以动态获取数据。
vue学习之(prop传参、v-bind传参、$emit向父级发送消息、input组件上使用 v-model、事件抛值)
迪迦 • 奥特曼
08-08 1886
基本示例 组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用 <div id="components-demo"> <button-counter></button-counter> </div> <script> Vue.component('button-counter', {
vue.js学习笔记之绑定style样式和class列表
11-29
因此，在 v-bind 用于 class 和 style 时，Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。 一.绑定Class属性。 绑定数据用v-bind:命令，简写成: 语法：<div v-bind:class=”{>。class...
vue学习笔记之指令v-text && v-html && v-bind详解
08-30
Vue学习笔记之指令v-text && v-html && v-bind详解 Vue.js 中的指令是以v-开头的自定义属性，每个不同的属性都有各自不同的意义和功能。今天我们将学习三个重要的指令：v-text、v-html和v-bind。 v-text v-text...
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
10-17
在Vue.js中，`v-model`指令是实现数据双向绑定的关键，它允许开发者轻松地在视图和模型之间同步数据。在表单控件如输入框、文本域、单选按钮、复选框等元素上使用`v-model`，可以实现实时更新数据，极大地简化了前端...
前端主流框架 vue.js笔记
06-28
1. **数据绑定**：Vue.js的核心特性之一就是双向数据绑定，这使得视图与模型之间的数据同步变得非常直观。通过`v-bind`指令可以将数据绑定到HTML元素上，而`v-model`则用于表单元素的双向绑定。 2. **指令系统**：...
Vue学习.pdf（Vue学习个人笔记资料-菜鸟入门）
11-20
Vue的语法主要包括插值表达式、指令（如v-if、v-show、v-for、v-bind、v-on等）、计算属性和事件处理。插值表达式用于在模板中展示和操作数据，而指令则提供了一种声明式地操作DOM的方式。计算属性是基于响应式数据...
vue中使用v-bind=“$attrs“和v-on=“$listeners“进行多层组件监听
MISS_zhang_0110的博客
01-13 2390
vue中使用v-bind="$attrs"和v-on="$listeners"进行多层组件监听一、层级关系1.top组件2.center组件3.bottom组件 vue组件之间通信，我们可以使用props和vuex两种方式，但是vuex太重，props在多级组件中使用又太麻烦， vue2.4版本提供了另一种方法，使用v-bind="$attrs"，将父组件中不被认为 props特性绑定的属性传入子组件中，通常配合 interitAttrs 选项一起使用。 v-bind="props":可以将父组件的所
Vue----Vue属性绑定
redrose2100的博客
06-20 1526
绑定属性比如对如下代码中动态的设置按钮是否可点击，这种用法还是非常好用的，即可以根据具体的场景动态的设置isDisabled的变量的值，而更具isDisabled变量的值决定按钮是否可以点击。通过v-bind:xxx 的方式即可实现Vue的属性绑定，比如如下代码，为div标签增加class属性，class的属性值通过msg变量提供。此外，还可以通过对象的形式同时设置多个属性，比如如下代码中，通过v-bind直接指定button_attr对象，则可以同时设置两个属性。此时运行后，可以发现属性同样是有效的。
五、vue基础-指令之v-bind
Sean_0819的博客
04-19 7391
前面要讲的一系列指令，主要是将值插入到模板内容中。但是，除了内容需要动态来决定外，某些我们也希望动态来绑定。
Vue中 v-bind、v-model、以及父给子传值
weixin_43377049的博客
09-06 3163
Vue中 v-bind、v-model、以及父给子传值
Vue使用及插值、属性绑定、计算属性、事件绑定
qq_54195263的博客
08-11 237
去修改元素的属性，使用v-bind时候,属性等号右边是一个变量。样式类名不确定,需要动态指定。(如果数据没有发生变化,不会方法一直调用)要绑定个数确定,名字确定，绑定个数不确定,名字也不确定。(3).once 一次性事件。1.数据需要转化以后再显示。@事件类型.prevent。传递参数会把默认形参覆盖。绑定数据 {{}}该指令表示元素和组件。跳过vue的语法解析。
v-bind用法详解
青山不改，绿水长流。
09-24 4696
因此，在v-bind 用于 style 时，Vue.js 专门增强了它。v-bind 主要用于属性绑定，比方你的class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定。值得一提的是 当在一个自定义组件上使用 class 属性时，这些类将被添加到该组件的根元素上面。（3）甚至我们可以在数组中用三元运算符，你也想根据条件切换列表中的 class，可以用三元表达式。（2）我们可以把一个数组传给 v-bind:class，以应用一个 class 列表。
【vue】基础指令及属性绑定
webxuj的博客
08-29 744
可以为元素的属性动态绑定属性值 vue 规定（类似语法糖）v-bind:指令。插值表达式支持一些js数据类型，但window下面的全局变量不支持。
在Vue.js中，可以通过v-bind指令来绑定哪些表单属性
05-29
在Vue.js中，可以通过v-bind指令来绑定下列表单属性： 1. value：用于绑定表单元素的值，例如input、textarea等。 2. checked：用于绑定单选框和复选框的选中状态。 3. selected：用于绑定下拉框的选中项。 4. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值