.vue文件和.html文件的＜style＞位置

最新推荐文章于 2024-03-24 16:46:14 发布
最新推荐文章于 2024-03-24 16:46:14 发布
阅读量970 收藏 2
点赞数 1
分类专栏： 前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45829049/article/details/116449770
版权

.vue

: style 放在最后

<template>
<div>

  <table style="height:100px;" border = "black" width = "370px" align="center" border-spacing="10px" >
    <tr>
      <td aligh = "center" colspan="5" class="zitidaxiao" >在线接单
        <img src="../assets/头像1.png"
  class="img_class">
      </td>
    </tr>
  </table>
  
</div>
</template>



<script>

export default {
  data() {
    return {
      active: 0,
      
      tabBtnList:['来连麦','推荐','王者荣耀','和平精英'] ,
      value:'simple',
      good_icon:[
        {
          imgurl:require('../assets/2.png'),
          good_txt:'头像1'
        },{
          imgurl:require('../assets/头像1.png'),
          good_txt:'头像2'
        }
         
      ],
      icon: {
        active: 'https://img01.yzcdn.cn/vant/user-active.png',
        inactive: 'https://img01.yzcdn.cn/vant/user-inactive.png',
      },
    };
  },
};

</script>
<style scoped>
 .index_header{
   width:3.5rem;border:0;
   margin:.1rem 0 0 .1rem;
   padding:0;
}
  .custom-title {
    margin-right: 4px;
    height:10rem;
    vertical-align: middle;
  }

  .search-icon {
    font-size: 100px;
    height: 5rem;
    line-height: inherit;
  }
  .van_cell{
    margin-top: 100px;
    height:50px;
    font-size:20px;
    text-align: center;
    
  
  }
  .van_cell2{
    margin-top:200px;
  }
  .img_class{
    padding-top: 60px;
    width:40px;
    height: 40px;
    float: right;
    
   
  }
  .zitidaxiao{
    font-size:18px;
    text-align: center

}
.eee{
  margin-top: 10px;
}
</style>

.html

style 放在中部

<!DOCTYPE html>
<html>
	<head>
	<style>
	body{
			background-color:lightblue;
		}
		
	 h1{
		 color:white
		 text-align:center
	 }
	 p{
		 font-family: verdana;
		 font-size: 20px;
	 }
	</style>
	</head>
	<body>
		<h1>这是我的第一个CSS实例</h1>
		<p>我是一个段落</p>
		
	</body>
</html>
萌哒哒的CXY
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解.vue文件解析的实现
08-27
在.vue文件中，dom结构可以写在<template/>标签下，而针对该dom结构的样式文件则作为<template/>标签的兄弟元素<style/>存在，同样的控制该dom结构的脚本程序写在另一个兄弟元素<script/>之中。 4. <style/>标签 ...
关于vue :style 的几种使用方式
热门推荐
u010227042的博客
11-09 12万+
:style的使用 一 ,最通用的写法 1 <p:style="{fontFamily:arr.conFontFamily,color:arr.conFontColor,backgroundColor:arr.conBgColor}">{{con.title}}</p> 　　 二， 三元表达式 1 <a:style="{color:(index==0?arr.conFontColor:'#00...
vue动态添加style样式
Lucky铂爵
05-28 1454
1.凡是有-的style属性名都要变成驼峰式，比如font-size要变成fontSize 2.除了绑定值，其他的属性名的值要用引号括起来，比如backgroundColor:’#00a2ff’而不是 backgroundColor:#00a2ff 【对象】 html :style="{ color: activeColor, fontSize: fontSize + ‘px’ }" html :style="{color:(index==0?conFontColor:’#000’)}" 【数组】 html
19.Vue绑定style样式
weixin_45843676的博客
02-17 212
19.Vue绑定style样式
vue 在 mounted 中 通过 js 修改html、body节点的样式，设置背景图片
UserGuan的博客
11-29 2813
1、在 App.vue 中加入 body 样式，并修改默认样式（使背景图片四周不留空白） 2、在需要背景图的页面里加入样式 3、在原有代码中的 div 外再套一层 div 并引入第二步的样式
Vue项目：style样式篇
happy81997的博客
12-17 4万+
目录 一、动态使用样式 二、全局公共css样式文件 2.1 main.js中引入 2.2 index.html引入 三、单个vue文件中引入样式 四、样式作用范围控制 4.1 scoped私有作用域 4.2 混合使用 4.3 深度作用选择器 4.4 动态生成的dom的样式 一、动态使用样式 使用场景：根据不同的值使用不同的样式，或者给样式某个属性设置一个变量值 使用方法：...
vue2.0开发入门笔记之.vue文件的生成和使用
08-29
- `.vue` 文件是一个自包含的组件，它可以包含模板（template）、样式（style）和脚本（script）。模板部分用于定义组件的视图结构，使用 HTML 语法；样式部分用于定义组件的样式，可以包含 CSS 或预处理器如 SCSS...
vuejs 单文件组件.vue 文件的使用
10-19
Vuejs 的单文件组件以 `.vue` 文件扩展名存在，将模板（Template）、脚本（Script）和样式（Style）集成在一个文件内，简化了组件的组织和管理。这种组件化的开发模式使得代码更加模块化，提高了开发效率。 `.vue` ...
webstorm添加*.vue文件支持
08-27
然后，在*.vue文件中添加style标签时，需要添加rel=”stylesheet/scss”属性，以便支持SCSS语法。 四、总结 本文详细介绍了如何在WebStorm中添加*.vue文件支持，包括安装Vue.js插件和使用WebStorm EAP版本，并且...
http-vue-loader：从您的htmljs加载.vue文件
02-03
直接从html / js加载.vue文件。 没有node.js环境，没有构建步骤。 例子 my-component.vue < template> < div xss=removed>Hello {{who}}</ div> </ template> < script > module . exports = { data : ...
VUE中style应该怎么写 css怎么写 样式书写规范 建议用less，东西少，sass有点多，不利于团队
qlin_11的博客
08-15 1327
css 样式存放目录（待定，选用less或scss）这里我不会把style抽到外头，但是可以写一些全局样式放在这里，里面注意放入common.less normalize.less,里面直接写.el-button那么所有的el-button就会被影响，这里要提一下style的书写，el的样式用class包一下再再style里面写，而普通的就用style scoped来写，注意要用class来包一下...
Vue之style的用法
chaofei_liang的博客
09-23 5万+
Vue中style的用法总结如下： v-bind:style  简写:style 1.基本用法 .red{ color: red; } .blue{ background: blue; }
vue3的style的用法
weixin_51140082的博客
02-03 1830
【代码】vue3的style的用法。
Vue动态设置Style属性
梦寻汝的博客
09-30 3万+
https://blog.csdn.net/fuzhongbin/article/details/104970325 凡是有-的style属性名都要变成驼峰式，比如font-size要变成fontSize 除了绑定值，其他的属性名的值要用引号括起来，比如backgroundColor:'#00a2ff'而不是 backgroundColor:#00a2ff 对象 html :style="{ color: activeColor, fontSize: fontSize + 'px' }" .
vue动态绑定样式:style
hzxOnlineOk的博客
06-28 9750
1.直接在元素上通过:style的形式，书写样式对象<h1 :style="{color:'red','font-weight':200}">这是一个H1</h1> 2.将样式对象定义在data中，并直接引用到:style中 在data上定义样式data:{ styleObj1:{color:'blue','font-weight':200,'font-si...
Vue基础-04-class和style绑定
xx661660的博客
07-04 319
vue开发过程中，肯定会涉及到对元素的样式操作。vue提供了两种方式操作样式，动态操作class属性。直接标签上面写style属性，值是动态变化 scope属性 在vue组件中要设计样式，所有的样式代码都要放在style标签中。 可以指定当前style的样式只能在这个组件中使用，不能穿透到子组件如果你需要指定某个css样式穿透，我们可以在指定css选择器前面添加如下代码 外部样式 你们的每一个组件都可能会用到某些外部公共样式，你可以在组件指定引入c
VUE3v-text、v-html、:style的理解
最新发布
qingdouxiaohua的博客
03-24 900
当组件被渲染时，这个HTML内容会被插入到指定的位置。这个指令在处理需要解析HTML标签的内容时非常有用，但要注意避免插入不受信任的内容，以防止XSS攻击。它可以接受一个对象或一个数组，对象中的属性是CSS属性名，值是对应的CSS属性值。数组中的每个元素都是一个样式对象，它们会被应用到元素上。这个指令允许你根据组件的状态或属性动态地改变元素的样式。这三个指令在Vue 3中分别用于操作元素的纯文本内容、插入HTML内容和动态绑定样式。它接受一个表达式，并将该表达式的值设置为元素的文本内容。
vue之动态添加style样式的几种写法
甜心的专栏
04-06 2万+
在长期维护的项目里面，尽量要避免使用。凡是有 - 的style属性名都要变成驼峰式，比如font-size要变成fontSize；除了绑定值，其他的属性名的值要用引号括起来，比如backgroundColor:'#00a2ff'而不是 backgroundColor:#00a2ff。
.vue文件转换成.html
03-31
而将.vue文件转换成.html文件并不是Vue.js的主要用途，因为.vue文件中包含了Vue组件的定义、样式和逻辑，转换成html文件会丢失很多信息，也无法直接运行。但是，如果你想将Vue组件嵌入到其他网页中，可以通过编译器...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值