vuejs属性绑定

属性绑定

1.属性绑定(2种方式)

<!-- 绑定属性 -->
<div v-bind:title="title">鼠标hover</div>
<div :title="title">鼠标悬浮</div>

<!-- 绑定地址 -->
<img v-bind:src="url" height="400" width="600"/>

<!-- html页面渲染 -->
<!-- 直接数据绑定 -->
<div>{{html}}</div>
<!-- 绑定html属性解析 -->
<div v-html="html"></div>

#js代码
<script>
    export default {
        name: 'app',
        data() {
            return {
                msg: 'vue demo',
                title: '这里是一个title',
                url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561705454&di=33c13bd9a15f514bae71aaf8250ff305&imgtype=jpg&er=1&src=http%3A%2F%2Fp3.ssl.qhimg.com%2Ft017c9d8f1ba39d313f.jpg',
                html:'<h3>我是HTML文本</h3>'
            }
        }
    }
</script>

2.数据绑定的另一种

<!-- text数据绑定 -->
<div v-text="msg"></div>

3.class绑定

#html
<div>
    <h3>div颜色列表</h3>
    <ul>
        <!-- 简单绑定class -->
        <li v-bind:class="'red'">
            item ---- key
        </li>
        <br/>
        <!-- 列表绑定 -->
        <li v-for="(item,key) in list" :class="{'red':key ==0,'blue':key==1,'green':key==2,'pink':key==3}">
            {{item}} ---- {{key}}
        </li>
    </ul>
</div>
#js代码
export default {
    name: 'app',
    data() {
        return {
            list: ['红色', '蓝色', '绿色', '粉色'],
        }
    }
}

4.style绑定

<!-- style绑定 -->
<div class="box" v-bind:style="{height:heightMax+'px',width:widthMax+'px'}">这里是一个div盒子</div>
#js代码
export default {
    name: 'app',
    data() {
        return {
             widthMax: 400,
             heightMax: 200,
        }
    }
}

源码

github

原文地址:https://www.cnblogs.com/ghostxbh/p/11273399.html

时间: 2024-10-10 00:24:58

vuejs属性绑定的相关文章

2-4 Vue中的属性绑定和双向数据绑定

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性绑定和双向数据绑定</title> <script src="./vue.js"></script> </head> <body> <div id="root"

Vue.js学习笔记:属性绑定 v-bind

v-bind  主要用于属性绑定,Vue官方提供了一个简写方式 :bind,例如: <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> 绑定HTML Class 一.对象语法: 我们可以给v-bind:class 一个对象,以动态地切换class.注意:v-bind:class指令可以与普通的class特

Ember.js 入门指南——handlebars属性绑定

本文从http://www.ibeginer.sinaapp.com迁移过来,欢迎访问原页面. 简单讲属性绑定其实就是在HTML标签内(是在一个标签的"<"和">"中使用)直接使用handlebars表达式.可以直接用handlebars表达式的值作为HTML标签中某个属性的值. 准备工作:ember generate route binding-element-attributes 1,绑定字符串 <!-- //  app/templates/b

【WPF】如何把一个枚举属性绑定到多个RadioButton

一.说明 很多时候,我们要把一个枚举的属性的绑定到一组RadioButton上.大家都知道是使用IValueConverter来做,但到底怎么做才好? 而且多个RadioButton的Checked和UnChecked都会触发绑定,这样就会调多次的Set. 二.目的 实现一个枚举属性绑定到多个RadioButton, 属性的Set方法不会被触发多次. 三.实现 方法大家都知道,就是利用Converter和ConevertParamter属性. 因为多个控件绑定一个属性,Checked和UnChe

使用注解属性绑定

大家应该知道在Spring中有一个注解@Value,他可以帮助我们来讲Spring加载的配置文件(*.perperties)文件中的信息自动的注入到我们的非静态属性中的. 一般情况下我们会这样使用: 1. 首先在Spring的配置文件中加载属性文件: ? 1 <context:property-placeholder location="classpath:component.properties"  ignore-unresolvable="true"/&g

qml中的属性绑定与赋值

浅谈qml属性绑定与赋值 属性赋值 就字面意思,赋一个值给属性 Rectangle { id:rect Component.onCompeleted:{ rect.width = 10; // 赋值 rect.height = 10; // 赋值 rect.color = "red"; // 赋值 } } 属性赋值时会发出信号,可以通过信号处理器,来为信号添加处理函数,关于信号处理器,也就是连接到同一个信号的槽函数的队列,每次为信号处理器书写处理函数时,并不会覆盖上一次书写的处理器,最

Knockoutjs实例 - 属性绑定(Bindings)之流程控制(Control flow)

一.foreach binding 使用此功能可以方便我们循环遍历输出某个数组.集合中的内容. (1).循环遍历输出数组 View Row Code 1 <script type="text/javascript" src="knockout-2.2.0.js"></script> 2   3 <table> 4      <thead> 5          <tr><th>First nam

C# 属性绑定

C#的反射明显的比AS3的反射要强很多啊.可以从外部访问到类的私有成员.举个例子:                 Type _class = this.GetType();                 FieldInfo _field = _class.GetField(@fieldName, BindingFlags.Instance | BindingFlags.NonPublic); 枚举 : BindingFlags.NonPublic ->非公共成员将包括在内进行搜索,意思就是p

xaml mvvm(2)之属性绑定

通过微软INotifyPropertyChanged接口,可以实现对UI实时更新,不管是数据源或者目标对象,可以实现相互通知. 下面我们根据INotifyPropertyChanged编写一个扩展类.该类是基于C#5.0特性,这里我们介绍一下System.Runtime.CompilerServices命名空间下的CallerMemberName特性,当RaisePropertyChanged的属性名称参数为空,而通过编译器可以智能加上,可以通过反编译工具知晓,这点改进这点很人性化.注:如果开发