VUE（v-bind： 属性绑定，v-model：双向数据绑定）

最新推荐文章于 2023-11-21 23:00:58 发布
最新推荐文章于 2023-11-21 23:00:58 发布
阅读量384 收藏
点赞数 1
分类专栏： vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lbs311709000127/article/details/102834916
版权
前端 同时被 2 个专栏收录
39 篇文章 0 订阅
订阅专栏
vue
35 篇文章 0 订阅
订阅专栏 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
		<style>
			.active{
				color:red;
			}
			.line{
				color:blue;
			}
		</style>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="root">
			<img v-bind:src="imgURL" />
			<a v-bind:href="aHref">百度一下</a>
            <div v-bind:title="title">this a title</div>  <!--模板绑定，“v-bind：”可写为“：”-->
            <input :placeholder="placeholder" v-model="content"/>  <!--双向数据绑定-->
            <div >{{content}}</div>
			<h2 v-bind:class="{active:isActive,line:isline}">{{title}}</h2>//绑定类
        </div> 
        <script>
            new Vue({
                el:"#root",
                data:{
					isActive:false,
					isline:true,
                    title:"this a title",
                    placeholder:"this a content",
                    content:"",
					aHref:"http://www.baidu.com",
					imgURL:"http://b-ssl.duitang.com/uploads/item/201208/30/20120830173930_PBfJE.jpeg"
                },
                methods:{
                    changeMsg:function(){  

                    }
                }
            })
        </script>
    </body>
</html>

 

小青龙8085
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue——# 指令 v-bind 动态绑定 # 指令v-model 双向数据绑定
生活不止眼前的枸杞， 还有蜂蜜和咖啡！
01-02 734
1， v-bind基础使用 v-bind用来动态的绑定一个或者多个特性。没有参数时，可以绑定到一个包含键值对的对象。常用于动态绑定class和style，以及href等。 简写为一个冒号 ： <div id="app"> <img v-bind:src="imgUrl" alt="" /> // 从服务器中获取图片地址 <a :href=...
双向绑定v-bind
weixin_30408309的博客
08-26 466
通过v-model绑定输出数据 <script> export default { data() { return { pagestyle:'https://v4.bootcss.com/docs/4.3/dist/css/bootstrap.css', pagecss...
Vue的数据绑定
Y1_1Y1_1y1_1y的博客
01-13 465
Vue中有2种数据绑定的方式： 1.单向绑定(v-bind)：数据只能从data流向页面 2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data【双向绑定一般都应用在表单类元素上(如：input、select等)】 v-model:value 可以简写为v-model，因为v-model默认收集的就是value值 <div id="root"> <!-- 单向数据绑定：<input type="text" v-bind:valu
Vue封装双向数据绑定组件、对象传参
qq_42928070的博客
01-11 542
使用v-bind 对象传参 v-model 传参 v-bind:xxx.sync双向绑定传参 <template> <div> <div>{{proxy.value}}</div> <h4>{{age}}</h4> <h3>{{modelProp}}</h3> <h2>{{syncProp}}</h2> <el-button @cl..
vue单向以及双向数据绑定(v-bind和v-model的使用)
见证自己学习,成长的记录
09-14 2640
Vue中有两种绑定方式1 单项绑定(v-bind):数据只能从data流向页面,可以简写为:2 双项绑定(v-model):数据不能能从data流向页面，还可以从页面流向data备注：1双向绑定一般都应用在表单类元素上(比如input,select,radio等)2 v-model:value可以简写v-model,因为v-model默认收集的就是value值单向双向绑定简写如下
详解vue中v-model和v-bind绑定数据的异同
10-14
总结起来，`v-bind` 和 `v-model` 在Vue中分别代表单向数据绑定和双向数据绑定，它们都用于建立组件和数据之间的桥梁。`v-bind` 更适合于静态属性的设置和更新，而 `v-model` 则适用于表单元素的交互，提供便捷的...
VUE v-model表单数据双向绑定完整示例
10-17
本文将详细介绍如何使用Vue.js中的v-model指令实现表单数据的双向绑定，并通过一个完整的示例来展示这一过程。 ### Vue v-model指令简介 v-model是Vue.js提供的一个指令，它用于在表单元素上创建双向数据绑定。...
vue指令之表单控件绑定v-model v-model与v-bind结合使用
10-17
在Vue.js中，`v-model` 是一个非常重要的指令，它实现了双向数据绑定，使得Vue实例的数据和表单控件的值能够实时同步。在HTML表单元素上使用`v-model`，我们可以轻松地处理用户输入，而无需手动编写事件监听器和数据...
浅析Vue.js中v-bind v-model的使用和区别
10-17
Vue.js中的数据绑定是其最为核心的特性之一，其中v-bind和v-model是两个经常被使用且作用各异的指令。本文将深入分析这两个指令的使用方法和它们之间的区别，帮助大家更好地掌握Vue.js的数据绑定技术。 v-model指令...
Vue框架学习笔记——v-bind数据单向绑定和v-model数据双向绑定
Aer_7z的博客
11-21 1502
使用v-model就可以实现数据的双向绑定，也就是input输入框中的数据会影响Vue实例中的数据，Vue实例中的数据也会影响Input输入框中的数据。标签中的数据和Vue实例中的数据是单向绑定的，Vue实例中的对应数据改变会带着标签中的数据改变，但是标签中的数据改变则不会带着Vue实例中的数据改变。效果：修改v-model的数据会改变Vue实例中的数据，进而带动单向数据绑定的v-bind输入框一起变化。效果：修改Vue实例中的数据会改变v-model的数据，也会改变v-bind输入框的数据。
v-bind单向绑定与v-model双向绑定
微电子学与固体电子学-俞驰
01-04 2737
Vue.js 最显著的特点就是响应式和数据驱动，也就是将Model和View(View在下面的图示中)进行单向绑定或者双向绑定。 Vue.js主要有三种数据绑定形式，并且都是基于单向绑定和双向绑定。 1.插值形式 {{}}2.单向绑定(v-bind)：把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新。因此，我们不需要进行额外的DOM操作，只需...
Vue之插值表达式，v-bind（单向绑定），v-model（双向绑定）
浩泽学编程的博客
05-23 1831
插值表达式{{…}}v-bindv-model以上就是关于插值表达式、v-bind、v-model的讲解。
Vue3 v-bind & v-on & v-model
xiangxiongfly
02-22 997
v-bind 属性绑定 v-on 事件绑定 v-model 双向绑定
vue-cli: v-bind绑定数据 的用法
Xu190131的博客
05-20 345
一. 绑定数据v-bind 花括号{{ }}绑定数据 花括号{{ }}里面可以写表达式 v-bind绑定属性 绑定动态属性 <template> <div class="about"> <h1>数据绑定v-bind</h1> <!-- 花括号{{}}绑定数据 --> <p>{{ msg }}</p> <!-- 花括号{{}}里面可以写表达式 --> <di
9. vue常用指令 v-bind 给属性绑定值
人无远虑,必有近忧.
07-02 2177
v-bind:属性名=“value” value–指的是Vue对象中data中的 属性名key <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, i
vue实现简单的数据筛选
huihuihaha222222的博客
06-26 2720
代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv...
vue学习：单向绑定(v-bind)和双向绑定(v-model)
daokoi的博客
03-24 4279
单向绑定和双向绑定* 单向绑定 v-html、v-text、插值表达式{{}}、v-bind都是单向绑定，即数据改变，页面元素也会跟着改变；而页面元素改变时，数据并不会跟着变。 v-bind是对html标签的属性进行绑定，其缩写为冒号（:）,例如：(v-bind:href)可以写为(:href)。 以v-bind为例来说明单向绑定： <!-- 给html标签的属性绑定 --> <div id="app"> <a v-bind:href="link">ogogo
Vue属性绑定v-bind:和双向数据绑定v-model
璐璐璐
09-19 6278
&lt;body&gt; &lt;!--属性绑定v-bind: 可以直接省略为 :--&gt; &lt;!--一旦使用模版指令 等号之后的就是一个js表达式，所以里面可以使用很多js表达式--&gt; &lt;div id="root"&gt; &lt;div v-bind:title="title"&gt;123&lt;/div&gt; &lt;!--单
数据绑定：单向绑定（v-bind）和双向绑定（v-model）
weixin_56035334的博客
05-13 909
<!-- 准备好一个容器 --> <div id="root"> <!-- 普通写法 --> <!-- 单向数据绑定：<input type="text" v-bind:value="name"> <br> 双向数据绑定：<input type="text" v-model:value="name"> --> <!-- 简写 --.
v-model和v-bind:value的区别
最新发布
05-18
上面的代码中，message是Vue实例中定义的一个数据属性，通过v-model绑定到input元素上，当输入框的值改变时，message的值也会随之改变。 v-bind:value则是用于单向绑定数据的指令，它可以将Vue实例中的数据绑定到...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值