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 相关文章推荐
JQ获取动态加载的图片大小的正确方法分享
Nov 08 Javascript
jQuery模拟点击A标记示例参考
Apr 17 Javascript
使用JavaScript 实现的人脸检测
Mar 24 Javascript
JavaScript判断是否为数字的4种方法及效率比较
Apr 01 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
Nov 07 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
Dec 13 Javascript
JavaScript之排序函数_动力节点Java学院整理
Jun 30 Javascript
使用vue-resource进行数据交互的实例
Sep 02 Javascript
浅谈React + Webpack 构建打包优化
Jan 23 Javascript
解决vue的变量在settimeout内部效果失效的问题
Aug 30 Javascript
vue组件之间的数据传递方法详解
Apr 19 Javascript
react项目从新建到部署的实现示例
Feb 19 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
PHPMailer使用教程(PHPMailer发送邮件实例分析)
2012/12/06 PHP
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
获取数组中最大最小值方法js代码(自写)
2013/08/12 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
基于angular实现模拟微信小程序swiper组件
2017/06/11 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
2017/07/31 Javascript
详解组件库的webpack构建速度优化
2018/06/18 Javascript
vue+element+Java实现批量删除功能
2019/04/08 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
2019/05/02 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
vue实现扫码功能
2020/01/17 Javascript
vue打开其他项目页面并传入数据详解
2020/11/25 Vue.js
python利用装饰器进行运算的实例分析
2015/08/04 Python
python Spyder界面无法打开的解决方法
2018/04/27 Python
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
详解如何管理多个Python版本和虚拟环境
2019/05/10 Python
PyQt5下拉式复选框QComboCheckBox的实例
2019/06/25 Python
详解将Pandas中的DataFrame类型转换成Numpy中array类型的三种方法
2019/07/06 Python
Python中利用LSTM模型进行时间序列预测分析的实现
2019/07/26 Python
python3.7实现云之讯、聚合短信平台的短信发送功能
2019/09/26 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
详解Python中的编码问题(encoding与decode、str与bytes)
2020/09/30 Python
Pycharm中使用git进行合作开发的教程详解
2020/11/17 Python
Python基于Socket实现简易多人聊天室的示例代码
2020/11/29 Python
selenium自动化测试入门实战
2020/12/21 Python
英国顶级家庭折扣店:The Works
2017/09/06 全球购物
毕业生就业推荐信范文
2013/12/01 职场文书
护士实习生自我鉴定范文
2013/12/10 职场文书
公务员转正鉴定材料
2014/02/11 职场文书
车队司机自我鉴定
2014/03/02 职场文书
农业项目合作意向书
2015/05/08 职场文书
傲慢与偏见电影观后感
2015/06/10 职场文书
python如何读取.mtx文件
2021/04/22 Python