1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>智能社——http://www.zhinengshe.com</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <style>
  10.  
  11.     </style>
  12.     <script src="vue.js"></script>
  13.     <script>
  14.         window.onload=function(){
  15.             new Vue({
  16.                 el:'#box',
  17.                 data:{
  18.                     url:'https://www.baidu.com/img/bd_logo1.png',
  19.                     w:'200px',
  20.                     t:'这是一张美丽的图片'
  21.                 },
  22.                 methods:{
  23.                 }
  24.             });
  25.         };
  26.     </script>
  27. </head>
  28. <body>
  29.     <div id="box">
  30.         <!--<img src="{{url}}" alt=""> 这种方式会报404错 -->   属性是通过bind来绑定的
  31.         <img v-bind:src="url" alt="">
  32.         <img :src="url" alt="">
  33.         <img :src="url" alt="" :width="w" :title="t">
  34.     </div>
  35. </body>
  36. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>智能社——http://www.zhinengshe.com</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <style>
  10.         .red{
  11.             color: red;
  12.         }
  13.         .blue{
  14.             background: blue;
  15.         }
  16.     </style>
  17.     <script src="vue.js"></script>
  18.     <script>
  19.         window.onload=function(){
  20.             new Vue({
  21.                 el:'#box',
  22.                 data:{
  23.                     red:'red', //是style的red
  24.                     b:'blue'
  25.                 },
  26.                 methods:{
  27.                 }
  28.             });
  29.         };
  30.     </script>
  31. </head>
  32. <body>
  33.     <div id="box">   //red是data里面的red,多个
  34.         <strong :class="[red,b]">文字...</strong>
  35.         <strong :class="red">文字...</strong> //单个data里面的red
  36.     </div>
  37. </body>
  38. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>智能社——http://www.zhinengshe.com</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <style>
  10.         .red{
  11.             color: red;
  12.         }
  13.         .blue{
  14.             background: blue;
  15.         }
  16.     </style>
  17.     <script src="vue.js"></script>
  18.     <script>
  19.         window.onload=function(){
  20.             new Vue({
  21.                 el:'#box',
  22.                 data:{
  23.                 },
  24.                 methods:{
  25.                 }
  26.             });
  27.         };
  28.     </script>
  29. </head>
  30. <body>
  31.     <div id="box">   //不是data里的red，是style的red,true表示生肖，
  32.         <strong :class="{red:true,blue:true}">文字...</strong>
  33.     </div>
  34. </body>
  35. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>智能社——http://www.zhinengshe.com</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <style>
  10.         .red{
  11.             color: red;
  12.         }
  13.         .blue{
  14.             background: blue;
  15.         }
  16.     </style>
  17.     <script src="vue.js"></script>
  18.     <script>
  19.         window.onload=function(){
  20.             new Vue({
  21.                 el:'#box',
  22.                 data:{
  23.                     a:true,
  24.                     b:false
  25.                 },
  26.                 methods:{
  27.                 }
  28.             });
  29.         };
  30.     </script>
  31. </head>
  32. <body>
  33.     <div id="box">//不是data里的red，是style的red,true表示生肖，
  34.         <strong :class="{red:a,blue:b}">文字...</strong>
  35.     </div>
  36. </body>
  37. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>智能社——http://www.zhinengshe.com</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <style>
  10.         .red{
  11.             color: red;
  12.         }
  13.         .blue{
  14.             background: blue;
  15.         }
  16.     </style>
  17.     <script src="vue.js"></script>
  18.     <script>
  19.         window.onload=function(){
  20.             new Vue({
  21.                 el:'#box',
  22.                 data:{
  23.                     json:{
  24.                         red:true,
  25.                         blue:true
  26.                     }
  27.                 },
  28.                 methods:{
  29.                 }
  30.             });
  31.         };
  32.     </script>
  33. </head>
  34. <body>
  35.     <div id="box">
  36.         <strong :class="json">文字...</strong>
  37.     </div>
  38. </body>
  39. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>智能社——http://www.zhinengshe.com</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <style>
  10.         .red{
  11.             color: red;
  12.         }
  13.         .blue{
  14.             background: blue;
  15.         }
  16.     </style>
  17.     <script src="vue.js"></script>
  18.     <script>
  19.         window.onload=function(){
  20.             new Vue({
  21.                 el:'#box',
  22.                 data:{
  23.  
  24.                 },
  25.                 methods:{
  26.                 }
  27.             });
  28.         };
  29.     </script>
  30. </head>
  31. <body>
  32.     <div id="box">
  33.         <strong :style="{color:'red'}">文字...</strong>
  34.     </div>
  35. </body>
  36. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>智能社——http://www.zhinengshe.com</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <style>
  10.         .red{
  11.             color: red;
  12.         }
  13.         .blue{
  14.             background: blue;
  15.         }
  16.     </style>
  17.     <script src="vue.js"></script>
  18.     <script>
  19.         window.onload=function(){
  20.             new Vue({
  21.                 el:'#box',
  22.                 data:{
  23.                     c:{color:'red'}
  24.                 },
  25.                 methods:{
  26.                 }
  27.             });
  28.         };
  29.     </script>
  30. </head>
  31. <body>
  32.     <div id="box">
  33.         <strong :style="[c]">文字...</strong>
  34.     </div>
  35. </body>
  36. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>智能社——http://www.zhinengshe.com</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <style>
  10.         .red{
  11.             color: red;
  12.         }
  13.         .blue{
  14.             background: blue;
  15.         }
  16.     </style>
  17.     <script src="vue.js"></script>
  18.     <script>
  19.         window.onload=function(){
  20.             new Vue({
  21.                 el:'#box',
  22.                 data:{
  23.                     c:{color:'red'},
  24.                     b:{backgroundColor:'blue'}
  25.                 },
  26.                 methods:{
  27.                 }
  28.             });
  29.         };
  30.     </script>
  31. </head>
  32. <body>
  33.     <div id="box">
  34.         <strong :style="[c,b]">文字...</strong>
  35.     </div>
  36. </body>
  37. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>智能社——http://www.zhinengshe.com</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <style>
  10.         .red{
  11.             color: red;
  12.         }
  13.         .blue{
  14.             background: blue;
  15.         }
  16.     </style>
  17.     <script src="vue.js"></script>
  18.     <script>
  19.         window.onload=function(){
  20.             new Vue({
  21.                 el:'#box',
  22.                 data:{
  23.                     a:{
  24.                         color:'red',
  25.                         backgroundColor:'gray'  //js里面的驼峰写法
  26.                     }
  27.                 },
  28.                 methods:{
  29.                 }
  30.             });
  31.         };
  32.     </script>
  33. </head>
  34. <body>
  35.     <div id="box">
  36.         <strong :style="a">文字...</strong>
  37.     </div>
  38. </body>
  39. </html>

vue4 属性 class style的更多相关文章

  1. td的cellIndex属性被style.display改变

    IE7下面td的cellIndex属性,居然会随着style.display='none'的设置而改变,真是太恶心了

  2. Vue入门---属性、style和class绑定方法

    一 .用对象的方法绑定class <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  3. CSS style 属性

    CSS style 属性 定义和用法 必需的 type 属性规定样式表的 MIME 类型. type 属性指示 <style> 与 </style> 标签之间的内容. 值 &q ...

  4. js外部样式和style属性的添加移除

    在页面中,往往一个控件的外部样式或者内部样式往往不只一个,而我们只需操作其中一个样式该怎么办呢? 最开始我也不知道该怎么做,就用了最原始的方法,替换原有的样式为新的样式,这样每次都要获取原样式,找通用 ...

  5. js_给元素增加或移除style属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 前端vue之属性指令、style和class、条件渲染、列表渲染、事件处理、数据双向绑定、表单控制、v-model进阶

    今日内容概要 属性指令 style和class 条件渲染 列表渲染 事件处理 数据的双向绑定 v-model进阶 购物车案例 内容详细 1.属性指令 <!DOCTYPE html> < ...

  7. CSS float 浮动属性

    本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...

  8. WPF整理-Style

    "Consistency in a user interface is an important trait; there are many facets of consistency,   ...

  9. JS Div滚动，下拉框添加属性，年月日下拉条

    创建某一下拉菜单的项: str = str+"<option value='"+i+"'>"+i+"</option>&quo ...

随机推荐

  1. NOIp2018模拟赛四十五~？？

    欠的太多,咕了咕了 最近复赛临近时间紧,就不每次都写感想和题解了,只写点有意义的好题

  2. ubuntu安装和使用

    1.查看ubuntu是32位还是64位 教程:jingyan.baidu.com/article/db55b609ab531f4ba30a2f13.html 2.安装maven 教程:www.linu ...

  3. python学习笔记:第四天

    day04: 一.计算求值 num += 1 等价于 num = num + 1num -= 1 等价于 num = num - 1num *= 2 等价于 num = num * 2num /= 2 ...

  4. CentOS6.3从光盘安装gcc（更改yum源）[转]

    转自:http://www.linuxidc.com/Linux/2012-11/73826.htm 一.加载光盘镜像 加载本地bin-DVD镜像文件到虚拟机系统,如图所示: 二.更改yum源 1.挂 ...

  5. HDU 3108 Ant Trip

    Ant Trip Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  6. 严重: 文档无效: 找不到语法。 at (null:2:19)

    1.错误描写叙述 严重: 文档无效: 找不到语法. at (null:2:19) org.xml.sax.SAXParseException; systemId: file:/D:/MyEclipse ...

  7. 拥抱PBO（基于项目的组织）聚焦核心价值创造

    近年来.PBO(Project-Based Organizations)作为一种新兴的整合各类专业智力资源和专业知识的组织结构,受到越来越多的关注,第五版PMBOK出现的新词汇.三种组织(职能型.矩阵 ...

  8. opecv2 MeanShift 使用均值漂移算法查找物体

    #if !defined OFINDER #define OFINDER #include <opencv2\core\core.hpp> #include <opencv2\img ...

  9. Leaflet--建设移动设备友好的互动地图

    Leaflet 是一个为建设移动设备友好的互动地图,而开发的现代的.开源的 JavaScript 库.它是由 Vladimir Agafonkin 带领一个专业贡献者团队开发,尽管代码仅有 33 KB ...

  10. Struts2国际化-getText()方法

    转自https://blog.csdn.net/qq_43560838/article/details/83747604 一:简单理解 国际化简称i18n,其来源是英文单词 international ...