未绑定

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <style type="text/css">
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>{{msg2}}</div>
        <div v-text="msg2"></div>
        <!-- 前两个只是打印 <h1>哈哈，我是一个大大的H1，我大，我骄傲</h1>-->
        <!-- v-html可以打印html标签 -->
        <div v-html="msg2"></div>

<!-- v-bind 是Vue 中提供用于绑定属性的指令 -->
        <input type="button" value="按钮" title="mytitle">
    </div>

<script src="./lib/vue.min.js"></script>

<script>
        var vm=new Vue({
            el:'#app',
            data:{
                msg:'123',
                msg2:'<h1>哈哈，我是一个大大的H1，我大，我骄傲</h1>',
                mytitle:'这是一个自己定义的title'
            }
        })
    </script>

</body>
</html>

绑定

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <style type="text/css">
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>{{msg2}}</div>
        <div v-text="msg2"></div>
        <!-- 前两个只是打印 <h1>哈哈，我是一个大大的H1，我大，我骄傲</h1>-->
        <!-- v-html可以打印html标签 -->
        <div v-html="msg2"></div>

<!-- v-bind 是Vue 中提供用于绑定属性的指令 -->
        <input type="button" value="按钮" v-bind:title="mytitle">  //mytitle是一个变量 后面还可以+ ‘123’ //： == v-bind: (简写)
    </div>

<script src="./lib/vue.min.js"></script>

<script>
        var vm=new Vue({
            el:'#app',
            data:{
                msg:'123',
                msg2:'<h1>哈哈，我是一个大大的H1，我大，我骄傲</h1>',
                mytitle:'这是一个自己定义的title'
            }
        })
    </script>

</body>
</html>

绑定属性 - v-bind的更多相关文章

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

    1.读取环境变量 凡是被spring管理的类,实现接口EnvironmentAware 重写方法 setEnvironment 可以在工程启动时,获取到系统环境变量和application配置文件中的 ...

  2. jQuery事件绑定on()、bind()与delegate() 方法详解

    jquery中有四种事件绑定函数,bind(),live(),on(),delegate(),由于live现在并不常用,因此不做过多解释. 1. bind()用法 $("div p" ...

  3. Compounding绑定属性

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  4. react事件处理函数中绑定this的bind()函数

    问题引入 import React, { Component } from 'react'; import { Text, View } from 'react-native'; export def ...

  5. class中限定绑定属性__slots__方法

    使用__slots__但是,如果我们想要限制class的属性怎么办?比如,只允许对Student实例添加name和age属性.为了达到限制的目的,Python允许在定义class的时候,定义一个特殊的 ...

  6. Vue 目录结构 绑定数据 绑定属性 循环渲染数据

    一.目录结构分析 node_modules 项目所需要的各种依赖 src 开发用的资源 assets 静态资源文件 App.vue 根组件 main.js 配置路由时会用 .babelrc 配置文件 ...

  7. v-bind绑定属性样式——class的三种绑定方式

    1.布尔值的绑定方式 <div id="demo"> <span v-bind:class="{‘class-a‘:isA ,‘class-b‘:isB ...

  8. React对比Vue（02 绑定属性，图片引入，数组循环等对比）

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

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

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

随机推荐

  1. SSM-网站后台管理系统制作（4）---Ajax前后端交互

    前提:Ajax本身就为前后端交互服务的,实现功能:用户输入信息,实时判断用户的情况,这也是现在登录界面普遍流行的做法.前端js通过注释识别Controller层,该层查询返回,和之前Google验证码 ...

  2. 剑指offer（25）复杂链表的复制

    题目描述 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),返回结果为复制后复杂链表的head.(注意,输出结果中请不要返回参数中的节点引用,否 ...

  3. 剑指offer（61）序列化二叉树

    题目描述 请实现两个函数,分别用来序列化和反序列化二叉树 题目分析 首先拿到题目时候,我先想到的是什么是序列化二叉树?序列化主要就是在前后端交互时候需要转换下,毕竟网络传输的是流式数据(二进制或者文本 ...

  4. Android中intent的分类及使用

    intent分为隐式和显式,显式的浅显易懂就是直呼其名,可用intent类的一个构造函数,直接传入context和想要打开的活动的名称.还可以用setcomponent方法来确定要打开的活动的名称.而 ...

  5. jquery easyui的应用-1

    下载地址是: www.jeasyui.com/download 当前版本是1.6.7 是由 jquery ui 扩展而来的. 像jquery ui, bootstrap, jquery easyui三 ...

  6. Java this关键字 学习笔记

    前言: 这篇博文就是系统的学习一下Java中的this关键字,本人对this关键字的理解知识简单的停留在对  类的成员变量进行赋值,这次所以决定系统的体会一下this 关键字 转自:https://b ...

  7. 深入分析Parquet列式存储格式【转】

    Parquet是面向分析型业务的列式存储格式,由Twitter和Cloudera合作开发,2015年5月从Apache的孵化器里毕业成为Apache顶级项目,最新的版本是1.8.0. 列式存储 列式存 ...

  8. html5中的几种布局简单比较

    html中的布局主要由静态布局.自适应布局.流式布局以及响应式布局几类,简单比较以下这几种布局的区别和特点. 一 静态布局(Static Layout) 表现:在传统web设计中,不管浏览器尺寸具体大 ...

  9. js Array​.prototype​.reduce()

    例子: , , , ]; const reducer = (accumulator, currentValue) => accumulator + currentValue; // 1 + 2 ...

  10. 【依赖注入】Unity和Autofac

    全面理解ASP.NET Core依赖注入:https://www.cnblogs.com/jesse2013/p/di-in-aspnetcore.html MSDN:https://docs.mic ...