详解VUE中v-bind的基本用法


Posted in Javascript onJuly 13, 2017

这两天学习了v-bind的基本用法,所以,今天添加一点小笔记。

1. v-bind:class(根据需求进行选择)

1.1

<style>
.box{
  background-color: #ff0;
}
.textColor{
  color: #000;
}
.textSize{
  font-size: 30px;
}
</style>

<div id="app">
  <span class="box" :class="{'textColor':isColor, 'textSize':isSize}">我是字</span>
</div>

<script>
new Vue({
  
el: "#app",

data:{
  
isColor:true,
  
isSize:true

}

})
</script>

1.2

<style>
.box{
  background-color: #ff0;
}
.textColor{
  color: #000;
}
.textSize{
  font-size: 30px;
}
</style>
<div id="app">
  <span class="box" :class="classObject">我是字</span>
</div>
<script>
new Vue({
el: "#app",
data:{
  classObject:{
  'textColor': true,
  'textSize': true
  }
  }
})
</script>

1.3

<style>
.box{
  background-color: #ff0;
}
.textColor{
  color: #0f0;
}
.textSize{
  font-size: 30px;
}
</style>
<div id="app">
  <span class="box" :class="[classA,classB]">我是字</span>
</div>
<script>
new Vue({
  el: "#app",
  data:{
    classA: 'textColor',
    classB: 'textSize'
  }
})
</script>

1.4

<style>
.box{
  background-color: #ff0;
}
.textColor{
  color: #0f0;
}
.textSize{
  font-size: 30px;
}
</style>
<div id="app">
  <span class="box" :class="[isA?classA:'', classB]">我是字</span>
</div>
<script>
new Vue({
  el: "#app",
  data:{
    classA: 'textColor',
    classB: 'textSize',
    isA: false
  }
})
</script>

 2.v-bind:style (根据需求进行选择,驼峰式)

 2.1

<div id="app">
  <span class="box" :style="{color:activeColor, fontSize:size,textShadow:shadow}">我是字</span>
</div>
<script>
  new Vue({
    el: "#app",
    data:{
      activeColor: 'red',
      size: '30px',
      shadow: '5px 2px 6px #000'
    }
})
</script>

2.2

<div id="app">
  <span class="box" :style="styleObject">我是字</span>
</div>
<script>
new Vue({
  el: "#app",
  data:{
    styleObject:{
    color: 'red',
    fontSize: '30px',
    textShadow: '5px 2px 6px #000'
    }
  }
})
</script>

2.3

<div id="app">
  <span class="box" :style="[styleA,styleB]">我是字</span>
</div>
<script>
new Vue({
  el: "#app",
  data:{
    styleA:{
      fontSize: '30px',
      color: 'red'
    },
    styleB:{
      textShadow: '5px 2px 6px #000'
    }
  }
})
</script>

2.4

<div id="app">
  <span class="box" :style="[isA?styleA:'', styleB]">我是字</span>
</div>
<script>
new Vue({
  el: "#app",
  data:{
    styleA:{
      fontSize: '30px',
      color: 'red'
    },
    styleB:{
      textShadow: '5px 2px 6px #000'
    },
    isA: false
  }
})
</script>

3.v-bind:src

<div id="app">
  <img :src="url" />
</div>
<script>
  new Vue({
    el: "#app",
    data:{
      url: "../img/pg.png"
    }
})
</script>

4.v-bind:title

<div id="app">
  <div :title="message">我是字</div>
</div>  
<script type="text/javascript">
  new Vue({
  el: "#app",
  data:{
    message:"我是吱吱"
  }
  })
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 加载时自动调整图片大小
May 28 Javascript
JavaScript 学习笔记(四)
Dec 31 Javascript
js为空或不是对象问题的快速解决方法
Dec 11 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
Mar 27 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
May 17 Javascript
jquery pagination分页插件使用详解(后台struts2)
Jan 22 Javascript
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
Apr 09 Javascript
JavaScript 2018 中即将迎来的新功能
Sep 21 Javascript
详解如何使用nvm管理Node.js多版本
May 06 Javascript
JavaScript常用内置对象用法分析
Jul 09 Javascript
Vue 组件复用多次自定义参数操作
Jul 27 Javascript
vue通过watch对input做字数限定的方法
Jul 13 #Javascript
深入理解vue $refs的基本用法
Jul 13 #Javascript
js自定义弹框插件的封装
Aug 24 #Javascript
解决vue里碰到 $refs 的问题的方法
Jul 13 #Javascript
jsonp跨域请求详解
Jul 13 #Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
Jul 13 #Javascript
JavaScript反弹动画效果的实现代码
Jul 13 #Javascript
You might like
laravel-admin的图片删除实例
2019/09/30 PHP
MSN消息提示类
2006/09/05 Javascript
javascript学习基础笔记之DOM对象操作
2011/11/03 Javascript
解决json日期格式问题的3种方法
2014/02/02 Javascript
原生JS实现美图瀑布流布局赏析
2015/09/07 Javascript
深入探讨javascript函数式编程
2015/10/11 Javascript
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
2016/01/28 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
浅谈Vue.js组件(二)
2019/04/09 Javascript
javascript自定义加载loading效果
2020/09/15 Javascript
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
python中__call__内置函数用法实例
2015/06/04 Python
TF-IDF与余弦相似性的应用(二) 找出相似文章
2017/12/21 Python
Python爬虫实现抓取京东店铺信息及下载图片功能示例
2018/08/07 Python
Python 加密与解密小结
2018/12/06 Python
django开发post接口简单案例,获取参数值的方法
2018/12/11 Python
python石头剪刀布小游戏(三局两胜制)
2021/01/20 Python
Python将string转换到float的实例方法
2019/07/29 Python
python实现代码统计程序
2019/09/19 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
pycharm2020.1.2永久破解激活教程,实测有效
2020/10/29 Python
python 写一个文件分发小程序
2020/12/05 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
应用数学自荐书范文
2013/11/24 职场文书
口头翻译求职人自荐信
2013/12/07 职场文书
大三学生入党思想汇报
2014/01/02 职场文书
30岁生日感言
2014/01/25 职场文书
中层领导干部群众路线对照检查材料思想汇报
2014/10/02 职场文书
试用期辞职信范文
2015/03/02 职场文书
预备党员党支部意见
2015/06/02 职场文书
杨善洲观后感
2015/06/04 职场文书
新闻稿怎么写
2015/07/18 职场文书
通讯稿范文
2015/07/22 职场文书
600字作文之感受大自然
2019/11/27 职场文书
Java数组详细介绍及相关工具类
2022/04/14 Java/Android