vue学习——v-bind

最新推荐文章于 2021-05-25 12:19:25 发布
最新推荐文章于 2021-05-25 12:19:25 发布
阅读量120 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32953185/article/details/84967663
版权

v-bind比较简单

  • v-bind绑定数据和元素属性
        <a v-bind:href="url">点击</a>
  • 快捷写法,一个冒号
        <a :href="url">点击</a>
  • v-bind绑定class
        <div :class="klass"></div>
  • 甚至我们可以给它设置一个开关 isShow为true or false
        <div :class="{test: isShow}"></div>

练习demo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>v-bind指令</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        .background{
            background-color: green;
            width: 300px;
            height: 300px;
        }
        .test{
            background-color: yellow;
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- v-bind绑定数据和元素属性  -->
        <a v-bind:href="url">点击</a>
        <!-- 快捷写法 一个冒号 -->
        <a :href="url">点击</a>

        <!-- v-bind绑定class -->
        <div :class="klass"></div>
        <!-- 甚至我们可以给它设置一个开关 isShow为true or false -->
        <div :class="{test: isShow}"></div>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data:{
                url:"https://baidu.com",
                klass:"background",
                isShow: true
            }
        })
    </script>
</body>
</html>
人生莫如饥荒
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
v-bind指令的详细介绍
qq_52499703的博客
07-27 655
本篇文章将详细介绍v-bind指令的用法及其应用场景。
深入浅析AngularJs模版与v-bind
10-18
在本篇文章中，我们将深入探讨AngularJS中的模板语法以及`v-bind`指令，帮助你理解这两种数据绑定方式的区别和适用场景。 首先，让我们了解一下AngularJS中的基础模板语法——双大括号`{{ }}`。这个被称为插值...
Vue学习——v-bind绑定class用法
hhthht8888的博客
01-22 1322
1.通过v-bind可以为一个标签绑定多个类： .big{ font-size: 30px; } .italic{ font-style: italic } .red{ color:red; } &lt;div id="bind_test2"&gt; &lt;p :class="['red', 'big', 'italic']"&gt;测试字符串&lt;/p&gt;...
Vue中的v-bind指令基本用法和介绍
qq_41196217的博客
05-25 4万+
Vue中的v-bind指令基本用法和介绍 v-bind指令主要用于响应式的更新html属性 一般我们要想在元素节点的属性上绑定vue的data数据 是不可以直接使用{{ }}插入值语法来使用 <h1 title="{{tit}}">Hello World</h1> <!-- 以下假设是我们定义的data对象 拥有一个data数据tit 如果我们使用插值的形式 那么实际页面提示的title信息是{{tit}} 而不是this is title --&
vue利用v-bind动态绑定属性和props实现父向子传值
八佾舞于庭
10-10 6800
v-bind 动态绑定属性 比如src class  style以及自定义属性如下面代码所示data columns urllazy  v-bind动态绑定  //父组件中引入子组件 import treeTable from '../../common/TreeGrid.vue'; components: { treeTable, } //父组件中子组件标签 &lt;tree-ta...
对Vue- 动态元素属性及v-bind和v-model的区别详解
12-29
Mustache (双大括号写法...从一开始学习的时候我们就知道v-bind是可以绑定属性和数据的，而v-model也一样可以绑定数据，那么v-bind和v-model的区别在哪里？ 1：如果 id={{xxx}}这种写法，则HTML实际上是这样的：id=”{{
前端经典——Vue-tab-demo.rar
11-29
Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面...总之，Vue Tab Demo是学习和理解Vue.js组件化开发的一个好案例，它涵盖了数据绑定、组件化、事件处理等多个核心概念，是提升前端开发技能的重要实践。
详解vue表单——小白速看
08-27
通过使用 Vue 的指令 v-model，可以在表单控件元素上创建双向数据绑定。下面将详细介绍 Vue 表单的使用方法和注意事项。 一、基本用法 v-model 指令是 Vue 框架中的一种特殊指令，用于在表单控件元素上创建双向...
audio 播放器 在vue-audio-better上增加图标名称和大小
04-27
在Vue.js中，我们可以利用属性绑定(`v-bind`)来动态设置组件的属性，例如，可以为图标名称绑定一个数据属性，并在组件中使用该属性来显示名称。同样，图标大小可以通过CSS样式或者组件的props来控制。如果组件没有...
vue.2.2.1版本
weshouldhelp的博客
10-29 5487
/*! *转载自https://unpkg.com/vue@2.2.1/dist/vue.js * Vue.js v2.2.1 * (c) 2014-2017 Evan You * Released under the MIT License. */ (function (global, factory) { typeof exports === 'object' &amp;&...
Vue指令之v-bind篇
孤岛的鲸
09-16 1339
v-bind指令，bind中文意思是捆绑的意思，额，捆绑。。。 其绑定的参数在v-bind:指令中的maohao（冒号）后指明，没错就是我标红的那个冒号 v-bind指令被用来响应地更新HTML属性。 扯了这么多，还不如举个例子: 小二，上代码： ​ &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;...
Vue的学习Ⅰ（mustache、一些指令、v-bind、计算属性、methods）
胡图图不糊涂的博客
04-15 245
一、插值操作与一些指令 {{}}：mustache语法 mustache + v-once <div class = "app"> <h3>{{message}}，{{name}}</h3> <h3 v-once>{{message}}，{{name}}</h3> /*v-once目的是当外部传入数据改变的时候不让h3...
a标签中href=""的几种用法
热门推荐
Wendy
10-11 24万+
众所周知，a标签的最重要功能是实现超链接和锚点。而且，大多数人认为a标签最重要的作用是实现超链接，今天我刚好碰到a标签的一种写法，所以就来整理下a标签中href的几种用法。 一、Js的几种调用方法（参考总结的） 1、a href="javascript:js_method();" 这是常用的方法，但是这种方法在传递this等参数的时候很容易出问题，而且javascript:协议作为a的h
Vue中的v-for和v-bind结合使用小习题
xiaoxi_hahaha的博客
05-24 2077
需求： 当你打开网页后，出现某个列表，默认情况下，列表中的第一项为红色，此后，当用户点击其中的任何一个列表项之后，此列表项变成红色，其它的列表项为黑色。 vue代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .active{ color:r
vue中的v-bind、v-on作用
保持饥渴、好奇
08-03 5500
直接上代码： v-bind： v-bind 是vue中，提供的用于绑定属性的指令 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学习 v-cloak v-test v-html</title> <!--/...
v-bind:href= 拼接字符串 - 代码篇
草巾冒小子的博客
03-01 8417
vuejs标签属性数据绑定和拼接 v-bind:href= 拼接字符串 v-bind绑定href 的值（拼接属性值 String） 参考csdn文章：终于知道vue.js标签属性数据绑定和拼接 代码实例如下： &amp;lt;a class=&quot;didi-link&quot; v-bind:href=&quot;['xxx/detail/'+item.Id]&quot; &amp;gt; {{item.Name}} &amp;
v-bind
spfLinux的博客
01-10 304
百度 --> new Vue({ el:'#example', data:{ msg:'VueJS is Awesome', myUrl:'https://www.baidu.com', imgName:'index5.JPG', imgPath:'img/index5.JPG' } });
v-bind:href
弱智de克星
11-08 5546
<a v-bind:href="url">...</a> 将该元素的href属性与表达式url的值绑定。<html> <head> <title></title> <script src="https://unpkg.com/vue"></script> </head> <body> <div id="app"> <a v-bind:href="url">c
Vue基础教程：v-model表单绑定与实践
它首先通过`v-bind:value`将Vue实例中的数据绑定到表单元素的值（`value`属性），然后通过`v-on:input`监听输入事件，当用户修改表单时，会触发事件并更新数据模型。 3. **v-model与不同表单元素**: - **v-model...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

人生莫如饥荒

如果对您有帮助，也可以给点赏钱

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值