详解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 时间函数getYear()的使用问题探讨
Apr 01 Javascript
原生js实现模拟滚动条
Jun 15 Javascript
javascript实现简单的进度条
Jul 02 Javascript
学习Javascript面向对象编程之封装
Feb 23 Javascript
JavaScript中的时间处理小结
Feb 24 Javascript
使用jquery.form.js实现图片上传的方法
May 05 Javascript
基于JavaScript实现树形下拉框
Aug 10 Javascript
微信小程序前端源码逻辑和工作流
Sep 25 Javascript
微信小程序开发教程-手势解锁实例
Jan 06 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
详解vue项目中实现图片裁剪功能
Jun 07 Javascript
jstree中的checkbox默认选中和隐藏示例代码
Dec 29 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
PHP数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
php读取文件内容的方法汇总
2015/01/24 PHP
php使用类继承解决代码重复的问题
2015/02/11 PHP
ThinkPHP5.0 图片上传生成缩略图实例代码说明
2018/06/20 PHP
PHP基于面向对象封装的分页类示例
2019/03/15 PHP
为Plesk PHP7启用Oracle OCI8扩展方法总结
2019/03/29 PHP
javascript一些实用技巧小结
2011/03/18 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
2011/12/20 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
2012/12/12 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
2012/12/26 Javascript
基于javascript的JSON格式页面展示美化方法
2014/07/02 Javascript
详解JavaScript时间格式化
2015/12/23 Javascript
详解ES6中的let命令
2020/04/05 Javascript
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
vue 2.0 购物车小球抛物线的示例代码
2018/02/01 Javascript
详解Vue 多级组件透传新方法provide/inject
2018/05/09 Javascript
详解微信小程序实现WebSocket心跳重连
2018/07/31 Javascript
Vue从TodoList中学父子组件通信
2019/02/05 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
2020/05/29 jQuery
把大数据数字口语化(python与js)两种实现
2013/02/21 Python
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
python实现log日志的示例代码
2018/04/28 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
学Python 3的理由和必要性
2019/11/19 Python
解决pytorch报错:AssertionError: Invalid device id的问题
2020/01/10 Python
HTML5 Video/Audio播放本地文件示例介绍
2013/11/18 HTML / CSS
StringBuilder和String的区别
2015/05/18 面试题
吃空饷专项治理工作实施方案
2014/03/04 职场文书
建筑工程专业大学生求职信
2014/04/23 职场文书
庆元旦主持词
2015/07/06 职场文书
小学安全教育主题班会
2015/08/12 职场文书
怎样写工作总结啊!
2019/06/18 职场文书
详解MindSpore自定义模型损失函数
2021/06/30 Python
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL