13.VUE学习之控制行内样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>vue</title>
<link rel="stylesheet" href="">
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="vue">
<div :style="{color:red,fontSize:size+'px'}">测试一</div>
<input type="number" v-model="size">
<div :style="div2">测试二</div> <!--可以用div2变量-->
<div :style="[div2]">测试三</div> <!--也可以写成数组的形式-->
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: "#vue",
data:{
red:"red",
size:28,
div2:{
color:'red',
background:'yellow',
width:'30%'
}
}
});
</script>
</html>
效果:
13.VUE学习之控制行内样式的更多相关文章
- 黑马vue---17、vue中通过属性绑定绑定style行内样式
黑马vue---17.vue中通过属性绑定绑定style行内样式 一.总结 一句话总结: 如果属性名中带有短线必须加引号,比如: h1StyleObj: { color: 'red', 'font-s ...
- HTML+CSS教程(四)选择器(id选择器,类选择器,标签选择器,子代选择器,后代选择器,组选择器,伪类选择器)/css引入页面的形式(行内样式、内嵌样式、外联样式)
一.回顾内容 前端的三大组成(三大模块) HTMl(超文本标记语言) 结构层 css(层叠样式表) 表现层:用来美化HTML结构 JS(Java script)(脚本语言) 行为层: ...
- CSS 行内样式 页内样式 外部样式
行内标签: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...
- JS:操作样式表1:行内样式
//访问元素样式1, stye属性只对行内样式有用 var box = document.getElementById("box"); // alert(box.style.col ...
- important覆盖行内样式
优先级,外部样式<内部样式<行内样式,后台富文本编辑器编辑的正文显示在前台时可用!important覆盖其行内样式 今天的问题,font-family:"思源黑体 CN!impo ...
- javascript常用函数封装——运动、cookie、ajax、获取行内样式兼容写法、拖拽
运动.cookie.ajax.获取行内样式兼容写法.拖拽封装大合集. //url,data,type,timeout,success,error function ajax(options){ //- ...
- css的三种使用方式:行内样式,内嵌样式,外部引用样式
三中的使用方法的简单实例如下: 行内样式: <!doctype html> <html> <head> <meta charset="UTF-8&q ...
- JavaScript的DOM_操作行内样式
一.检测浏览器是否支持css CSS 作为(X)HTML 的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的 CSS 能力.CSS 的能力和 DOM 级别密切相关,所以我们有必要检测当前浏 ...
- 原生js去除行内样式
概述 今天我用js给dom元素设置样式,碰到了一些问题,记下来供以后开发时参考,相信对其他人也有用. 心得 js加上class: $dom.classList.add('some-class'); j ...
随机推荐
- C++学习 - 虚表,虚函数,虚函数表指针学习笔记
http://blog.csdn.net/alps1992/article/details/45052403 虚函数 虚函数就是用virtual来修饰的函数.虚函数是实现C++多态的基础. 虚表 每个 ...
- WebGL之物体选择
原文地址: WebGL之物体选择 使用WebGL将图形绘制到画布后,如何与外部进行交互?这其中最关键的就是如何实现物体的选择.比如鼠标点击后判断是否选中了某个图形或图形的某个部分. 本节实现的效果: ...
- elasticsearch报错:None of the configured nodes are available: []
问题:在内网测试的时候可以正常访问,但是部署到外网上客户端连接elasticsearch报错:None of the configured nodes are available: [] 原因:默认情 ...
- Xcode警告忽略
Xcode中 cmd+B 之后总会出现各种各样的警告,对于一个对代码有洁癖的人,这种情况很难忍,接下来我们用些特殊手段强制消除这些警告 一.忽略源文件中的警告 使用编译器宏来操作 #pragma c ...
- Duplicate Emails
Write a SQL query to find all duplicate emails in a table named Person. +----+---------+ | Id | Emai ...
- vue列表到详情页的实现
路由里边的 router/index.js path:'/detail/:id' 动态id 列表页渲染时: :to="'/detail/'+item.id" ===>id是指 ...
- css钻石旋转实现
css钻石旋转实现: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
- mybatis-mybatis-config.xml详细介绍
1.mybatis-config.xml 1.1:配置,配置可以是引入外部文件,也可以是在本文件内写配置 <!-- <properties resource="jdbc.prop ...
- ubuntu下JDK安装(更新旧版本JAVA)
1.sudo apt-get install openjdk-8-jre openjdk-8-jdk 2.默认会安装在 路径为 /usr/lib/jvm/java-7-openjdk-amd64 下面 ...
- 如何在SAP Server Side JavaScript里消费destination
在SAP云平台里打开SAP HANA Web-Based Development Workbench进行服务器端JavaScript的开发. 创建一个新的package: 创建一个新的applicat ...