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>

原文地址:https://www.cnblogs.com/zsczsc/p/9553032.html

时间: 2024-10-28 19:44:23

vue2.* 绑定属性 绑定Class 绑定style 03的相关文章

vue 绑定属性 绑定Class 绑定style

1 <template> 2 3 4 <div id="app"> 5 6 <h2>{{msg}}</h2> 7 8 <br> 9 10 <div v-bind:title="title">鼠标瞄上去看一下</div> 11 12 13 <img src="https://www.itying.com/themes/itying/images/logo.gif&quo

3.绑定属性、绑定html、绑定class、绑定style

1.绑定属性 <template> <div id="app"> <!-- 绑定属性 --> <br> <div v-bind:title='title'>鼠标悬浮出现</div> <br> <img :src="url" alt="仙女"> </div> </template> <script> export de

vuejs学习笔记(1)--属性,事件绑定,ajax

属性 v-for 类似于angular中的 ng-repeat ,用于重复生成html片段: <ul id="box"> <li v-for="(v, i) in list">{{v}}</li> </ul> <script> var vm = new Vue({ el: '#box', // 对应的元素选择器 或者是 指向元素的变量 data: { // data list: [1,2,3] } });

vuejs学习笔记(2)--属性,事件绑定,ajax

属性 v-for 类似于angular中的 ng-repeat ,用于重复生成html片段: <ul id="box"> <li v-for="(v, i) in list">{{v}}</li> </ul> <script> var vm = new Vue({ el: '#box', // 对应的元素选择器 或者是 指向元素的变量 data: { // data list: [1,2,3] } });

Compounding绑定属性

声明:原创作品,转载时请注明文章来自SAP师太技术博客:www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将追究法律责任!原文链接:http://www.cnblogs.com/jiangzhengjun/p/4295520.html Compounding:绑定另一特征属性,即某个特征不能作为主键,还需要另一特征属性一起作为主键(如 Item行项目号不能单独做为主键,还需要一个凭证号才能一起作为主键),如这里的成本中心还需要与控制区域一起才能唯一标

WPF利用通过父控件属性来获得绑定数据源RelativeSource

WPF利用通过父控件属性来获得绑定数据源RelativeSource 有时候我们不确定作为数据源的对象叫什么名字,但知道作为绑定源与UI布局有相对的关系,如下是一段XAML代码,说明多层布局控件中放置一个文本控件,来显示父级控件的名称. 1.XAML Html代码 <Grid x:Name="g1" Background="Red" Margin="10"> <DockPanel x:Name="d1" Ba

[十六]SpringBoot 之 读取环境变量和绑定属性对象

1.读取环境变量 凡是被spring管理的类,实现接口EnvironmentAware 重写方法 setEnvironment 可以在工程启动时,获取到系统环境变量和application配置文件中的变量. 主要是@Configuration,实现接口:EnvironmentAware就能获取到系统环境信息 package me.shijunjie.config; import org.springframework.beans.factory.annotation.Value; import

python:属性查找与绑定方法

属性查找 类有两种属性:数据属性和函数属性 1.类的数据属性是所有对象共享的 # 类的数据属性是所有对象共享的,id是一样的 print(id(OldboyStudent.school)) # 4830576 print(id(s1.school)) # 4830576 print(id(s2.school)) # 4830576 print(id(s3.school)) # 4830576 2. 类的函数属性是绑定给对象用的,称为绑定到对象的方法 # 类的函数属性是绑定给对象使用的,obj.m

属性查找;绑定到对象的方法的特殊之处;对象之间的交互

四 属性查找 类有两种属性:数据属性和函数属性 1. 类的数据属性是所有对象共享的 2. 类的函数属性是绑定给对象用的 #类的数据属性是所有对象共享的,id都一样 print(id(OldboyStudent.school)) print(id(s1.school)) print(id(s2.school)) print(id(s3.school)) ''' 4377347328 4377347328 4377347328 4377347328 ''' #类的函数属性是绑定给对象使用的,obj.