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 相关文章推荐
js Date概念详细介绍
Nov 22 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
JavaScript常用标签和方法总结
Sep 01 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
Oct 16 Javascript
Bootstrap媒体对象的实现
May 01 Javascript
基于JS实现的笛卡尔乘积之商品发布
May 13 Javascript
微信小程序 首页制作简单实例
Apr 07 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
Aug 09 Javascript
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
react-router4 配合webpack require.ensure 实现异步加载的示例
Jan 18 Javascript
JavaScript中变量、指针和引用功能与操作示例
Aug 04 Javascript
JavaScript学习笔记之DOM操作实例分析
Jan 08 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
PHP print类函数使用总结
2010/06/25 PHP
PHP 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
基于Discuz security.inc.php代码的深入分析
2013/06/03 PHP
php自定义session示例分享
2014/04/22 PHP
stripos函数知识点实例分享
2019/02/11 PHP
Array, Array Constructor, for in loop, typeof, instanceOf
2011/09/13 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
2012/12/27 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
2016/05/31 Javascript
jQuery获取浏览器类型和版本号的方法
2016/07/05 Javascript
NodeJS实现客户端js加密
2017/01/09 NodeJs
微信小程序获取用户openId的实现方法
2017/05/23 Javascript
详解Vue 非父子组件通信方法(非Vuex)
2017/05/24 Javascript
浅谈webpack编译vue项目生成的代码探索
2017/12/11 Javascript
swiper 解决动态加载数据滑动失效的问题
2018/02/26 Javascript
解决vue多个路由共用一个页面的问题
2018/03/12 Javascript
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
NodeJS 文件夹拷贝以及删除功能
2019/09/03 NodeJs
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
paramiko模块安装和使用(远程登录服务器)
2014/01/27 Python
实例说明Python中比较运算符的使用
2015/05/13 Python
Python3 无重复字符的最长子串的实现
2019/10/08 Python
flask 实现token机制的示例代码
2019/11/07 Python
python ftplib模块使用代码实例
2019/12/31 Python
基于pytorch的lstm参数使用详解
2020/01/14 Python
python中添加模块导入路径的方法
2021/02/03 Python
智能旅行箱:Horizn Studios
2018/04/30 全球购物
Cult Gaia官网:美国生活方式品牌
2019/08/16 全球购物
党员岗位承诺书
2014/03/25 职场文书
班主任经验交流会主持词
2014/04/01 职场文书
低碳环保倡议书
2014/04/14 职场文书
《长征》教学反思
2014/04/27 职场文书
师德模范事迹材料
2014/06/03 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
看上去很美观后感
2015/06/10 职场文书
Python中常见的导入方式总结
2021/05/06 Python