Vue数据绑定方式：v-bind和双大括号（{{}}）

最新推荐文章于 2024-08-20 15:58:34 发布
最新推荐文章于 2024-08-20 15:58:34 发布
阅读量9.2k 收藏
点赞数 1
分类专栏： Vue.js 文章标签： Vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013912696/article/details/97539327
版权

原文链接：https://www.runoob.com/vue2/vue-template-syntax.html

1、demo代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
    <pre><a v-bind:href="url">参考链接</a></pre>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
   message : 'Vue中定义的数据',
    url: 'https://www.runoob.com/vue2/vue-template-syntax.html'
  }
})
</script>
</body>
</html>

2、页面效果

在这里插入图片描述

3、使用总结

要想获取Vue中定义的数据，可以使用v-bind指令或者双大括号（{{}}），v-bind指令中需要使用双引号把变量名括起来，比如<a v-bind:href="url">参考链接</a>就是获取url变量对应的值，而双大括号直接写变量名即可，比如 <p>{{ message }}</p>

明24
关注
专栏目录
v-bind=“$attrs“学习笔记（三）
weixin_45148145的博客
11-26 570
v-bind=’$attrs’ 爷爷组件 <template> <div> <Father :name="'爷爷'" :age="34" :job="'cxy'"></Father> </div> </template> <script> import Father from "./Father"; export default { name: "GrandFather", components:
vue-cli: v-bind绑定数据 的用法
Xu190131的博客
05-20 355
一. 绑定数据v-bind 花括号{{ }}绑定数据 花括号{{ }}里面可以写表达式 v-bind绑定属性 绑定动态属性 <template> <div class="about"> <h1>数据绑定v-bind</h1> <!-- 花括号{{}}绑定数据 --> <p>{{ msg }}</p> <!-- 花括号{{}}里面可以写表达式 --> <di
3. Vue基础指令:{{}}；v-bind；v-on；v-model；v-if；v-for
cxrlover的博客
04-25 333
文章目录绑定数据'{{}}'绑定属性 v-bind绑定事件 v-on表单输入绑定 v-model 下面的例子，都是在原生的html页面中书写的，并没有使用Vue的工具构建项目。 绑定数据’{{}}’ 采用模板语法声明式的对数据进行渲染。 使用{{}}对数据与DOM建立关联，构建响应式的页面。 下面的例子，使用了在线CDN的方式引入Vue，counter的值，将会每秒递增。 <head> <meta charset="UTF-8"> <title>声明式渲染
Vue插值：双大括号标签、v-text、v-html、v-bind 指令
最新发布
pan_junbiao的博客
08-20 603
创建应用程序实例后，需要通过插值进行数据绑定。数据绑定是 Vue.js 最核心的一个特性。建立数据绑定后，数据和视图会相互关联，当数据发生变化时，视图会自动进行更新。这样就无须手动获取 DOM 的值，使代码更加简洁，提高了开发效率。文本插值是数据绑定最基本的形式，使用的是双大括号标签。它会自动将绑定的事件实时显示出来。
Vue.js：使用v-bind上加中括号实现动态绑定
零小唬的博客
01-11 313
Vue.js：使用v-bind上加中括号实现动态绑定
插值字符串{{}},模板字符串`${}`,属性命令v-bind:
puhuihui的博客
05-12 554
插值字符串{{}} 其中间可以放js表达式 如： {{ 变量 }} {{ 三元表达式 }} {{ 赋值表达式 }} 模板字符串` ${}` 其中\``就是模板字符串的表示（反引号），${}内部是放变量的 const string = “我今年 ’ + age + ’ 岁” const string =` 我今年 ${age} 岁` 属性命令v-bind: v-bind:style="这里写js代码" 如： //{}代表js中的对象 //这里是对象中的：（属性:属性值） v-bind:styl.
v-bind 与 v-model 与{{}}的区别
m0_69573649的博客
06-02 146
v-bind 主要用于属性绑定，比方你的class属.性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定。2.在data值大小不改变的前提下，可以进行一般的 算术运算、比较运算、逻辑运算、三元操作符等运算使用，也可以通过常量进行数据体现。1.在插值表达式中，只能设置简单的javascript表达式，不能设置复杂的表达式(例如for循环)。4.{{}}花括号与变量之间为了美观，通常表达式左右各一个空格。v-model指令来实现表单元素和数据的双向绑定。
vue的常用指令【v-bind v-for v-on v-model 自定义指令】
weixin_46336091的博客
11-16 787
除了用内置的指令完成vue工作需要后，还可以根据vue提供的方案完成自定义指令自定义指令：操作domdom对象.style.color='red'自定义指令它提供了5个钩子函数，它可以帮我们实现所需要的各种业务场景el 当前绑定到指令元素的dom对象,bindings 修饰符和传入的值bind 第一次绑定到元素时调用inserted 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)update 数据更新时调用。
一文读懂vue动态属性数据绑定（v-bind指令）
11-20
- 错误的使用方式：初学者常犯的错误是尝试在`v-bind`中嵌套使用双花括号`{{ }}`，如`v-bind:href="{{ toutiao }}"`，这是不必要的，因为`v-bind`已经处理了数据绑定，不需要再使用插值表达式。 2. **v-bind 绑定...
vue动态绑定属性，指令v-bind
热门推荐
qq_45700583的博客
10-08 1万+
文章目录1. v-bind指令介绍2.v-bind的基本使用 1. v-bind指令介绍 1.插值操作主要作用 ：将Vue实例中的数据插入到我们模板的内容当中，并改变data可以动态改变显示。 2.动态绑定属性 ：除了内容需要动态来决定外，元素的某些属性我们也希望动态来绑定。 比如，动态绑定a元素的href属性、动态绑定img元素的src属性。 Mustache双括号语法,只能在内容插值里使用，属性值是不可以用的 <img s
vue-数据绑定(文本插值/v-bind/v-html)
bakelFF的博客
04-24 559
插值 文本 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值： <span>Message: {{ name }}</span> <script> new Vue({ el: '#app', data: { name: '小白' } }) </script> 但是此语法不能用在html元素的属性上. 原始 HTML 若..
vue双花括号的使用方法 附练习题
08-28
主要为大家详细介绍了vue双花括号的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue中v-bind绑定属性后，双引号和花括号的结合用法
just__code的博客
04-15 3361
vue中v-bind绑定属性后，双引号和花括号的结合用法 v-bind绑定属性后，如果是对象写法，属性名要加单引号，以示和vue实例变量属性的区别，属性值可以是布尔值或者vue实例的变量属性或者计算属性或者js表达式 如果是数组写法，则每个元素可以是单引号字符串的写法，也可以是js表达式，不过不能使用 ‘mardown’ + checked === 0 ? ‘s’ : ‘’ 这种字符串拼接表达式...
vue大括号里接受一个函数_vue双花括号的使用方法 附练习题
weixin_30741285的博客
01-17 5138
本文实例为大家分享了vue双花括号的具体代码，供大家参考，具体内容如下{{}}的使用{{msg}}{{cart.brand}} 3 + 5 = {{ 3 + 5 }}new Vue({el:"#container",data:{msg:"Hello VueJs",cart:{brand:"Volvo",price:30}}})代码：双花括号的练习双花括号:执行表达式,将表达式的结果 输出到当前调用...
v-bind的用法
weixin_40945354的博客
09-03 150
<!DOCTYPE html> <html> <body> <div id="app"> <p v-bind="url">新浪网</p> </div> <script src="https://unpkg.com/vue@next"></script> <script> const vm = Vue.createApp({ data() {
v-bind绑定
qq_61541602的博客
04-23 2092
在Vue中v-bind用于绑定一个或多个属性值，或者向另一个组件传递Props值。 1.v-bind介绍 作用: 动态绑定属性 语法: v-bind: 属性名 = "数据名" 缩写(也叫语法糖): : 属性名 = "数据名" 2.v-bind动态绑定class(对象方法) 语法: v-bind: class= { 类名1: 布尔值, 类名n......} 例: <!DOCTYPE html> <html lang="en"> <hea...
vue大括号里接受一个函数_Vue核心：Vue扩展插件、双大括号表达式、强制数据绑定、绑定事件监听、计算属性、监视属性、计算属性高级、class与style绑定、条件渲染、列表渲染、事件处理、表单输入...
weixin_39926193的博客
01-17 675
1、Vue 扩展插件：*vue-cli: vue 脚手架*vue-resource(axios): ajax 请求*vue-router: 路由*vuex: 状态管理*vue-lazyload: 图片懒加载*vue-scroller: 页面滑动相关*mint-ui: 基于 vue 的 UI 组件库(移动端)*element-ui: 基于 vue 的 UI 组件库(PC 端)*它本身只关注 UI, ...
vue.js 中v-bind指令的使用
qq_34928693的博客
11-30 1338
v-bind是处理HTML中的标签属性的。 例如： html:&lt;div id=&quot;#app&quot;&gt; &lt;a v-bind:href='url'&gt;&lt;/a&gt; &lt;/div&gt;js:var app=new Vue({ el:'#app', data:{ url:'www.baidu.com' } })缩写：&lt;a :
v-bind用法详解
青山不改，绿水长流。
09-24 4847
因此，在v-bind 用于 style 时，Vue.js 专门增强了它。v-bind 主要用于属性绑定，比方你的class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定。值得一提的是 当在一个自定义组件上使用 class 属性时，这些类将被添加到该组件的根元素上面。（3）甚至我们可以在数组中用三元运算符，你也想根据条件切换列表中的 class，可以用三元表达式。（2）我们可以把一个数组传给 v-bind:class，以应用一个 class 列表。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值