<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的更多相关文章

  1. WPF绑定时要绑定属性,不要绑定字段

    如题(就是加get;set;),绑定属性不出东西,不知道为什么...

  2. Vue知识整理5:v-bind绑定属性(Class 与 Style 绑定)

    通过v-bind实现Class 与 Style 绑定,方便调整属性的值

  3. React对比Vue(02 绑定属性,图片引入,数组循环等对比)

    import React, { Component } from 'react'; import girl from '../assets/images/1.jpg' //这个是全局的不要this.s ...

  4. Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定

    Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定 创建 angular 组件 https://github.com/angular/angular- ...

  5. vue 绑定属性 绑定Class 绑定style

    <template> <div id="app"> <h2>{{msg}}</h2> <br> <div v-bi ...

  6. Vue绑定属性 绑定Class 绑定style

    <template> <div id="app"> <h2>{{msg}}</h2> <br> <div v-bi ...

  7. vue绑定属性、绑定class及绑定style

    1.绑定属性  v-bind 或者 : 例如:<img :src="pic_src" /> <template> <div id="app& ...

  8. Vue2自定义指令改变DOM值后未刷新data中绑定属性的值

    标签(空格分隔): Vue 自定义指令用于过滤输入框,只允许输入数字: Vue.directive('numberOnly', { bind: function (el, binding) { el. ...

  9. 重新想象 Windows 8 Store Apps (52) - 绑定: 与 Element Model Indexer Style RelativeSource 绑定, 以及绑定中的数据转换

    [源码下载] 重新想象 Windows 8 Store Apps (52) - 绑定: 与 Element Model Indexer Style RelativeSource 绑定, 以及绑定中的数 ...

随机推荐

  1. 将字符串 “ hello word,你 好 世 界 ! ” 两端空格去掉并且将其中的其他所有空格替换成一个空格 输出结果为“hello word,你 好 世界”

    string str = " hello word,你 好 世 界 ! "; string msg = str.Trim(); //去掉首尾空格 //使用split分割字符串,st ...

  2. 使用IndexOf方法来判断“咳嗽”出现的次数及索引、使用Dictionary<key,value> 集合统计没个字符出现的次数

    static void Main(string[] args) { #region string str = "患者:医生我咳嗽的很严重,大夫:你多大年纪了? 患者:我75岁 大夫:那二十岁 ...

  3. 纯代码Autolayout的三种方法

    Autolayout讲解较多的就是xib和storyboard用法,本文主要记录纯代码的Autolayout使用方法: 方法1.苹果原生的方法,这种方法虽然简单但是太过繁杂,可用性很差 //宽度=su ...

  4. Spring动态注册bean实现动态多数据源

    Spring动态注册bean实现动态多数据源 http://blog.csdn.net/littlechang/article/details/8071882

  5. C# 后台处理图片的几种方式

    第一种: 将上传图片直接保存到本地 var supportedTypes = new[] { "jpg", "jpeg", "png", & ...

  6. error: unpack failed: error Missing tree

    最近新建一个仓库,push时遇到如下问题,试了好多方法,最后在stackoverflow上找到解决办法了,可是在开始时就试过这方法,但不成.至于为嘛出现的这种错误,还是不明白原因. git.exe p ...

  7. BZOJ3812: 主旋律

    传送门 Sol 考虑容斥 强联通图反过来就是一些缩点后的 \(DAG\) 一个套路就是对出(入)度为 \(0\) 的点进行容斥 设 \(g_S,h_S\) 分别表示选了奇数个 \(0\) 入度和偶数个 ...

  8. ionic--分模块

    1. app.js var app=angular.module("myApp",["ionic","myController"," ...

  9. line-height属性的深入了解

    line-height属性的细节与大多数CSS属性不同,line-height支持属性值设置为无单位的数字.有无单位在子元素继承属性时有微妙的不同. 语法line-height: normal | & ...

  10. 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 ...