vue指令v-bind示例解析
1、绑定一个属性
<img id="app" v-bind:src="data:imageSrc"> <script> var app = Vue({ el: '#app', data: { imageSrc: '/images/image.png' } }) </script>
2、缩写
<img id="app" :src="data:imageSrc"> <script> var app = Vue({ el: '#app', data: { imageSrc: '/images/image.png' } }) </script>
3、内联字符串拼接
<img id="app" :src="'images/' + fileName"> <script> var app = Vue({ el: '#app', data: { fileName: 'image.png' } }) </script>
4、class绑定
css代码:
.classA{ color: red; } .classB{ color: blue; } .classC{ font-size: 14px; } .classD{ color: green; } .classE{ font-size: 30px; } .classF{ ; }
html代码:
<div id="app"> <h6 :class="{classA: isA}">class绑定示例1</h6> <h6 :class="[classB, classC]">class绑定示例2</h6> <h6 :class="[classD, { classE: isE, classF: isF }]">class绑定示例3</h6> </div> <script> var app = new Vue({ el: '#app', data: { isA: true, classB: 'classB', classC: 'classC', classD: 'classD', isE: true, isF: true } }) </script>
5、style 绑定
<div id="app"> <h6 :style="{ fontSize: size + 'px' }">style绑定示例1</h6> <h6 :style="[styleObjectA, styleObjectB]">style绑定示例2</h6> </div> <script> var app = new Vue({ el: '#app', data: { size: 30, styleObjectA: { fontSize: '30px' }, styleObjectB: { color: 'red' }, } }) </script>
6、绑定一个有属性的对象
<div id="app"> <p v-bind="{id: ID, attr: attr, other-attr: otherAttr}">绑定一个有属性的对象</p> </div> <script> var app = new Vue({ el: '#app', data: { ID: 'myId', attr: 'myAttr', otherAttr: 'myOtherAttr' } }) </script>
7、通过 prop 修饰符绑定 DOM 属性
<div id="app" :text-content.prop="text">通过 prop 修饰符绑定 DOM 属性</div> <script> var app = new Vue({ el: '#app', data: { text:'text' } }) </script>
8、prop 绑定 “prop” 必须在 my-component 中声明
<div id="app"> <child :message="boy"></child> </div> <script> Vue.component('child', { // 声明 props props: ['message'], // 就像 data 一样,prop 可以用在模板内 // 同样也可以在 vm 实例中像“this.message”这样使用 template: '<span>my name is {{message.name}}, my age is {{message.age}}</span>' }); var app = new Vue({ el:'#app', data:{ boy:{ name:'tom', age:'50' } } }) </script>
9、通过 $props 将父组件的 props 一起传给子组件
<div id="app"> <father-component :prop="someThing"></father-component> </div> <script> Vue.component('father-component', { template: '<child-component v-bind="$props"></child-component>' }); Vue.component('child-component', { template: '<h1>自定义组件!</h1>' }); var app = new Vue({ el: '#app', data:{ someThing:'someBind' } }) </script>
10、XLink(没搞明白。。。)
<svg><a :xlink:special="foo"></a></svg>
.camel
修饰符允许在使用 DOM 模板时将 v-bind
属性名称驼峰化,例如 SVG 的viewBox
属性:
<svg :view-box.camel="viewBox"></svg>
在使用字符串模板或通过 vue-loader
/vueify
编译时,无需使用 .camel。
vue指令v-bind示例解析的更多相关文章
- 一个能拖动,能调整大小,能更新bind值的vue指令-vuedragx
一. 背景说明 开发一个可自定义组件化门户配置页面,期间采用了vue框架作为前端视图引擎,作为一个刚入手vue的萌新,开发第一个功能就遇到了拦路虎.需要一个拖动并且可改变大小的容器盒子.当时查看vue ...
- vue指令详解和自定义指令
在vue中,指令以v-开头,是一种特殊的自定义行间属性,指令的职责就是其表达式的值改变时相应地将某些行为应用到DOM上 指令使用的示例 在下面的运行结果中可以看到,v-html是可以解析html标签的 ...
- Javascript - Vue - 指令
指令 v-cloak 解决闪烁,闪烁是指在网速较慢的情况下可能会出现插值表达式{{}}还没有填充数据时会把该表达式直接显示在页面上,如果不希望看到插值表达式则可以使用v-cloak指令,具体做法如下 ...
- vue指令总结(二)
一.vue指令 1.v-text v-text是用于操作纯文本,它会替代显示对应的数据对象上的值.当绑定的数据对象上的值发生改变,插值处的内容也会随之更新.注意:此处为单向绑定,数据对象上的值改变,插 ...
- Vue框架(二)——Vue指令(v-once指令、v-cloak指令、条件指令、v-pre指令、循环指令)、todolist案例、Vue实例(计算、监听)、组件、组件数据交互
Vue指令 1.v-once指令 单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) <!DOCTYPE html> <html lang=" ...
- (尚016)Vue指令(11个自带指令+自定义指令)
1.Vue常用指令 1)v:text:更新元素的 textContent 2)v-html:更新元素的 innerHTML 3)v-if:如果为true,当前标签才会输出到页面 4)v-else:如果 ...
- vue指令及组件
复习 """ vue: 为什么选择vue - 综合其他框架优点,轻量级,中文API,数据驱动,组件化开发,数据的双向绑定,虚拟DO 渐进式js框架 - 选择性控制 - 创 ...
- 第三篇:Vue指令
Vue指令 1.文本指令相关 v-*是Vue指令,会被vue解析,v-text="num"中的num是变量(指令是有限的,不可以自定义) v-text是原样输出渲染内容,渲染控制的 ...
- vue 指令,成员,组件
目录 复习 v-once指令 v-cloak指令(了解) 条件指令 v-pre指令(了解) 循环指令 todolist留言板案例 实例成员 - 插值表达式符号(了解) 计算属性 属性监听 组件 局部组 ...
- vue指令,实例成员,父子组件传参
v-once指令 """ v-once:单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) """ <di ...
随机推荐
- 引入CSS文件的方式,以及link与@import的区别
一.引入css的方式 在HTML中引入css的方法主要有4种:行内式.内嵌式.链接式和导入式. 1.行内式 <div style="background:yellow;"&g ...
- MySQL删除表方式差异
数据库删除语句 Drop/Delete/Truncate比较 Delete :删除数据表中的行(可以删除某一行,也可以在不删除数据表的情况下删除所有行). 删除某一行:Delete from 数据表名 ...
- Kafka 客户端实现逻辑分析
这里主要分析kafka 客户端实现 (代码分析以perl kafka实现为准) kafka客户端分为生产者和消费者,生产者发送消息,消费者获取消息. 在kafka协议里客户端通信中用到的最多的四个协议 ...
- bootstrap-datepicker的bug:有日期输入的地方在下个月页面选择当天日期会以当天日期减少一个月显示
Bug复现详细描述:先选择今日日期,然后点击下个月的某个日期,注意,是直接点击下个月的某个日期,不能通过日期显示tab的下个月箭头进入下个月再来点击某个日期,然后再直接点击本月的今日日期.然后bug会 ...
- 7.如何发布vue项目到服务器
1.确保程序是可运行的,即npm run dev可以运行 2.把index.js修改 3.运行npm命令npm run build 4.生成的dist文件为 直接点击index.html就能运行,部署 ...
- 第二章(jQuery选择器)
2.1jQuery选择器是什么 1.CSS选择器 选择器 示例 选择器 示例 标签选择器 a{ } p{ } ul{ } ID选择器 #ID{ } 类选择器 .class{ } 群组选择器 td,p, ...
- MAC开发环境安装
MAC开发环境安装 安装sancha cmd: 安装: https://www.sencha.com/products/extjs/cmd-download/ cmd运行 $ open .bash_p ...
- 读书共享 Primer Plus C-part 8
第十三章 文件输入/输出 fopen--fclose fopen 是文件的操作的开始 fclose是文件操作的结束 getc--putc getchar--putchar getc对应文件的获取单个字 ...
- 函数的上下文就是函数里面的this是谁
规律1:函数用圆括号调用,函数的上下文是window对象 比如小题目: function fun(){ var a = 888; alert(this.a); //实际上访问的是window.a } ...
- P3390 【模板】矩阵快速幂
题目背景 矩阵快速幂 题目描述 给定n*n的矩阵A,求A^k 输入输出格式 输入格式: 第一行,n,k 第2至n+1行,每行n个数,第i+1行第j个数表示矩阵第i行第j列的元素 输出格式: 输出A^k ...