强制绑定style属性

1、案例1

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>强制绑定style属性</title>
</head>

<body>
    <div id="app">
        <!--style="color: blue; font-size: 50px;"-->
        <p :style="{color:‘blue‘,fontSize:myFontSize+‘px‘}">pppppppppppppppppp</p>
        <!--color: red; font-size: 35px;-->
        <p :style="myStyle">pppppppppppppppppp</p>
    </div>
    <script src="../js/vue.js" type="text/javascript"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                myFontSize: 50,
                myStyle: {
                    color: "red",
                    fontSize: "35px"
                }
            }
        });
    </script>
</body>

</html>

原文地址:https://www.cnblogs.com/liuyang-520/p/12450895.html

时间: 2024-11-05 18:35:49

强制绑定style属性的相关文章

vue2.* 绑定属性 绑定Class 绑定style 03

<template> <div id="app"> <!-- 绑定属性 --> <div v-bind:title="title">你好,世界</div> <!-- 绑定class --> <div :class="{'red':flag,'blue':!flag}">你好,世界</div> <!-- 绑定style --> <div

VUE:class与style强制绑定

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .aClass{ color:red; } .bClass{ color:blue; } .cClass{ font-size: 30px; } </style> </head> <body> <!-- 1.理

绑定元素属性改变不通知界面

情景假设:绑定的是一个Point,当Point的X或者Y属性发生改变时,绑定的点也随界面改变 此时界面不会发生改变 原因:当X或者Y属性发生改变时并没有触发Point的Set方法 1 <Grid> 2 <Grid.Resources> 3 <local:PConverter x:Key="converter"/> 4 <local:PointsConverter x:Key="pointsC"/> 5 6 <St

SpreadJS 在 Angular2 中支持绑定哪些属性?

SpreadJS 纯前端表格控件是基于 HTML5 的 JavaScript 电子表格和网格功能控件,提供了完备的公式引擎.排序.过滤.输入控件.数据可视化.Excel 导入/导出等功能,适用于 .NET.Java 和移动端等各平台在线编辑类 Excel 功能的表格程序开发. 在上一篇文章中,我们了解到 SpreadJS 已经全面支持了 Angular2,并且只需4步就能完成在 Angular2 中集成 SpreadJS. 下面我们来介绍 SpreadJS 在 Angular2 中支持绑定哪些属

Vue学习之路8-v-on指令学习简单事件绑定之属性

前言 上一篇文章以v-on指令绑定click事件为例介绍了v-on指令的使用方法,本文介绍一下v-on绑定事件的一些属性的使用方法. v-on绑定指令属性 .stop属性 阻止单击事件继续向上传播(简单点说就是不让父节点及父节点以上的节点事件触发),本示例如果没有stop属性,父节点和爷爷节点事件将会触发,并在控制台输出内容,示例代码和示例结果如下: 1 1 <template> 2 2 <div> 3 3 <p class="title1">{{t

iOS TableViewController内修改TableView的style属性

1. TableView的style属性默认为只读(readonly)属性, 一般在创建TableViewController时设置: UITableViewController *tableViewController = [[UITableViewController alloc] initWithStyle:UITableViewStylePlain]; TableView样式为: 2. 若要在TableViewController内修改TableView的style属性, 需进行如下设置

绑定DOM属性

绑定title属性 <div id="app2"> <span v-bind:title="mess2">鼠标停留此处查看title</span> </div> <div id="app2"> <span v-bind:title="mess2">鼠标停留此处查看title</span> </div> 上面代码中,v-bind属性被

CSS和JavaScript标签style属性对照表

CSS和JavaScript标签style属性对照表一般情况是把"-"去掉,第二个字母用大写. CSS语法 (不区分大小写) JavaScript语法 (区分大小写) border borderborder-bottom borderBottomborder-bottom-color borderBottomColorborder-bottom-style borderBottomStyleborder-bottom-width borderBottomWidthborder-colo

css字体样式(Font Style),属性

css字体样式(Font Style),属性 css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者必需了解的知识.以下是我精心整理的css字体样式属性知识,供大家学习参考: css文本样式 序号 中文说明 标记语法 1 字体样式 {font:font-style font-variant font-weight font-size font-family} 2 字体类型 {font-family:"