vue2.* 绑定属性 绑定Class 绑定style 03
<template>
<div id="app">
<!-- 绑定属性 -->
<div v-bind:title="title">你好,世界</div>
<!-- 绑定class -->
<div :class="{'red':flag,'blue':!flag}">你好,世界</div>
<!-- 绑定style -->
<div class="box" :style="{width:boxwidth+'px'}"></div>
<!-- 绑定HTML -->
<div v-html="h"></div>
<!-- 绑定数据2 -->
<div v-text="msg"></div>
<!-- 循环数据,第一个高亮 -->
<ul>
<li v-for="(item,key) in list" :class="{'blue':key%2==0,'red':key%2!=0}">
{{key}}---{{item}}
</li>
</ul> </div>
</template> <script>
export default {
data () {
/*业务逻辑里面定义的数据*/
return {
title:'你好,世界',
h:'<h2>h2</h2>',
msg:'你好vue',
list:[1,2,3],
flag:true,
boxwidth:300
}
}
}
</script> <style>
.red{color:red}
.blue{color:blue}
.box{
height:100px;
width:100px;
background:red
}
</style>
vue2.* 绑定属性 绑定Class 绑定style 03的更多相关文章
- WPF绑定时要绑定属性,不要绑定字段
如题(就是加get;set;),绑定属性不出东西,不知道为什么...
- Vue知识整理5:v-bind绑定属性(Class 与 Style 绑定)
通过v-bind实现Class 与 Style 绑定,方便调整属性的值
- React对比Vue(02 绑定属性,图片引入,数组循环等对比)
import React, { Component } from 'react'; import girl from '../assets/images/1.jpg' //这个是全局的不要this.s ...
- Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定
Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定 创建 angular 组件 https://github.com/angular/angular- ...
- vue 绑定属性 绑定Class 绑定style
<template> <div id="app"> <h2>{{msg}}</h2> <br> <div v-bi ...
- Vue绑定属性 绑定Class 绑定style
<template> <div id="app"> <h2>{{msg}}</h2> <br> <div v-bi ...
- vue绑定属性、绑定class及绑定style
1.绑定属性 v-bind 或者 : 例如:<img :src="pic_src" /> <template> <div id="app& ...
- Vue2自定义指令改变DOM值后未刷新data中绑定属性的值
标签(空格分隔): Vue 自定义指令用于过滤输入框,只允许输入数字: Vue.directive('numberOnly', { bind: function (el, binding) { el. ...
- 重新想象 Windows 8 Store Apps (52) - 绑定: 与 Element Model Indexer Style RelativeSource 绑定, 以及绑定中的数据转换
[源码下载] 重新想象 Windows 8 Store Apps (52) - 绑定: 与 Element Model Indexer Style RelativeSource 绑定, 以及绑定中的数 ...
随机推荐
- 将字符串 “ hello word,你 好 世 界 ! ” 两端空格去掉并且将其中的其他所有空格替换成一个空格 输出结果为“hello word,你 好 世界”
string str = " hello word,你 好 世 界 ! "; string msg = str.Trim(); //去掉首尾空格 //使用split分割字符串,st ...
- 使用IndexOf方法来判断“咳嗽”出现的次数及索引、使用Dictionary<key,value> 集合统计没个字符出现的次数
static void Main(string[] args) { #region string str = "患者:医生我咳嗽的很严重,大夫:你多大年纪了? 患者:我75岁 大夫:那二十岁 ...
- 纯代码Autolayout的三种方法
Autolayout讲解较多的就是xib和storyboard用法,本文主要记录纯代码的Autolayout使用方法: 方法1.苹果原生的方法,这种方法虽然简单但是太过繁杂,可用性很差 //宽度=su ...
- Spring动态注册bean实现动态多数据源
Spring动态注册bean实现动态多数据源 http://blog.csdn.net/littlechang/article/details/8071882
- C# 后台处理图片的几种方式
第一种: 将上传图片直接保存到本地 var supportedTypes = new[] { "jpg", "jpeg", "png", & ...
- error: unpack failed: error Missing tree
最近新建一个仓库,push时遇到如下问题,试了好多方法,最后在stackoverflow上找到解决办法了,可是在开始时就试过这方法,但不成.至于为嘛出现的这种错误,还是不明白原因. git.exe p ...
- BZOJ3812: 主旋律
传送门 Sol 考虑容斥 强联通图反过来就是一些缩点后的 \(DAG\) 一个套路就是对出(入)度为 \(0\) 的点进行容斥 设 \(g_S,h_S\) 分别表示选了奇数个 \(0\) 入度和偶数个 ...
- ionic--分模块
1. app.js var app=angular.module("myApp",["ionic","myController"," ...
- line-height属性的深入了解
line-height属性的细节与大多数CSS属性不同,line-height支持属性值设置为无单位的数字.有无单位在子元素继承属性时有微妙的不同. 语法line-height: normal | & ...
- Google APAC----Africa 2010, Qualification Round(Problem A. Store Credit)----Perl 解法
原题地址链接:https://code.google.com/codejam/contest/351101/dashboard#s=p0 问题描述: Problem You receive a cre ...