vue基础之v-bind属性、class和style用法分析


Posted in Javascript onMarch 11, 2019

本文实例讲述了vue基础之v-bind属性、class和style用法。分享给大家供大家参考,具体如下:

一、属性

属性:

v-bind:src=""
width/height/title....

简写:

:src=""    推荐

<img src="{{url}}" alt="">    效果能出来,但是会报一个404错误
<img v-bind:src="url" alt="">    效果可以出来,不会发404请求

window.onload=function(){
      new Vue({
        el:'#box',
        data:{
          url:'https://www.baidu.com/img/bd_logo1.png',
          w:'200px',
          t:'这是一张美丽的图片'
        },
        methods:{
        }
      });
    };
<div id="box">
    <!--<img src="{{url}}" alt="">-->
    <img :src="url" alt="" :width="w" :title="t">
  </div>

二、class和style

:class=""     v-bind:class=""
:style=""     v-bind:style=""
:class="[red]"     red是数据
:class="[red,b,c,d]"

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    .red{
      color: red;
    }
    .blue{
      background: blue;
    }
  </style>
  <script src="vue.js"></script>
  <script>
    window.onload=function(){
      new Vue({
        el:'#box',
        data:{
          claOne:'red',//这里的red是样式class类名
          claTwo:'blue'
        },
        methods:{
        }
      });
    };
  </script>
</head>
<body>
  <div id="box">
    <!--这里的calOne,calTwo指data里的数据-->
    <strong :class="[claOne,claTwo]">文字...</strong>
  </div>
</body>
</html>

:class="{red:true, blue:false}"//这里是{ json}

<style>
    .red{
      color: red;
    }
    .blue{
      background: blue;
    }
  </style>
  <script src="vue.js"></script>
  <script>
    window.onload=function(){
      new Vue({
        el:'#box',
        data:{
        },
        methods:{
        }
      });
    };
  </script>
<div id="box">
    <strong :class="{red:true,blue:true}">文字...</strong>
  </div>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    .red{
      color: red;
    }
    .blue{
      background: blue;
    }
  </style>
  <script src="vue.js"></script>
  <script>
    window.onload=function(){
      new Vue({
        el:'#box',
        data:{
          a:true,
          b:false
        },
        methods:{
        }
      });
    };
  </script>
</head>
<body>
  <div id="box">
    <strong :class="{red:a,blue:b}">文字...</strong>
  </div>
</body>
</html>
data:{
json:{red:a, blue:false}
}

:class="json"

官方推荐用法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    .red{
      color: red;
    }
    .blue{
      background: blue;
    }
  </style>
  <script src="vue.js"></script>
  <script>
    window.onload=function(){
      new Vue({
        el:'#box',
        data:{
          json:{
            red:true,
            blue:true
          }
        },
        methods:{
        }
      });
    };
  </script>
</head>
<body>
  <div id="box">
    <strong :class="json">文字...</strong>
  </div>
</body>
</html>

style:
:style="[c]"

.red{
      color: red;
    }
<div id="box">
    <strong :style="{color:'red'}">文字...</strong>
  </div>

:style="[c,d]"

注意: 复合样式,采用驼峰命名法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style></style>
  <script src="vue.js"></script>
  <script>
    window.onload=function(){
      new Vue({
        el:'#box',
        data:{
          c:{color:'red'},//这里的red是 class .red
          b:{backgroundColor:'blue'}//注意: 复合样式,采用驼峰命名法
        },
        methods:{
        }
      });
    };
  </script>
</head>
<body>
  <div id="box">
    <strong :style="[c,b]">文字...</strong>
  </div>
</body>
</html>

:style="json"

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style></style>
  <script src="vue.js"></script>
  <script>
    window.onload=function(){
      new Vue({
        el:'#box',
        data:{
          a:{
            color:'red',
            backgroundColor:'gray'
          }
        },
        methods:{
        }
      });
    };
  </script>
</head>
<body>
  <div id="box">
    <strong :style="a">文字...</strong>
  </div>
</body>
</html>

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
javascript 正则替换 replace(regExp, function)用法
May 22 Javascript
容易被忽略的JS脚本特性
Sep 13 Javascript
js复制网页内容并兼容各主流浏览器的代码
Dec 17 Javascript
jQuery实现跨域
Feb 03 Javascript
AngularJS Bootstrap详细介绍及实例代码
Jul 28 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
Feb 24 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
Jul 21 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
May 28 Javascript
JavaScript惰性载入函数实例分析
Mar 27 Javascript
js实现提交前对列表数据的增删改查
Jan 16 Javascript
Taro小程序自定义顶部导航栏功能的实现
Dec 17 Javascript
配置eslint规范项目代码风格
Mar 11 #Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
Mar 11 #Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
Mar 11 #Javascript
每天学点Vue源码之vm.$mount挂载函数
Mar 11 #Javascript
JavaScript中常用的简洁高级技巧总结
Mar 10 #Javascript
angular 实现下拉列表组件的示例代码
Mar 09 #Javascript
Node.js动手撸一个静态资源服务器的方法
Mar 09 #Javascript
You might like
利用中国天气预报接口实现简单天气预报
2014/01/20 PHP
PHP 类与构造函数解析
2017/02/06 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
javascript设计模式 接口介绍
2012/07/24 Javascript
21个值得收藏的Javascript技巧
2014/02/04 Javascript
Visual Studio中js调试的方法图解
2014/06/30 Javascript
js获取当前日期时间及其它操作汇总
2015/04/17 Javascript
详细解读JavaScript编程中的Promise使用
2015/07/27 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
2021/01/20 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
JavaScript入门系列之知识点总结
2016/03/24 Javascript
JS中如何比较两个Json对象是否相等实例代码
2016/07/13 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
2016/12/24 Javascript
2种简单的js倒计时方式
2017/10/20 Javascript
对node.js中render和send的用法详解
2018/05/14 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
2020/07/26 Javascript
vue-quill-editor的使用及个性化定制操作
2020/08/04 Javascript
python绘图方法实例入门
2015/05/19 Python
Python3处理文件中每个词的方法
2015/05/22 Python
浅谈PyTorch的可重复性问题(如何使实验结果可复现)
2020/02/20 Python
python递归函数用法详解
2020/10/26 Python
Sneaker Studio乌克兰:购买运动鞋
2018/03/26 全球购物
品恩科技软件测试面试题
2014/10/26 面试题
机电专业个人自荐信格式模板
2013/09/23 职场文书
咨询公司各岗位职责
2013/12/02 职场文书
八年级美术教学反思
2014/02/02 职场文书
关于责任的演讲稿
2014/05/20 职场文书
民主生活会对照检查材料思想汇报
2014/09/27 职场文书
超市店长竞聘书
2015/09/15 职场文书
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers