未绑定

<!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. 剑指offer（42）和为S的字符串

    题目描述 输入一个递增排序的数组和一个数字S,在数组中查找两个数,是的他们的和正好是S,如果有多对数字的和等于S,输出两个数的乘积最小的. 输出描述: 对应每个测试案例,输出两个数,小的先输出. 题目 ...

  2. Validation failed for query for method

    问题原因 sql语法,使用@Query("select id, username, usersex, userphone from User where User.usersex = ?1& ...

  3. MyBatis进阶（三）

    MyBatis批量新增数据 1. 传统的JDBC批量插入数据 使用for循环 创建连接 获取连接 创建sql语句,交给连接 使用for循环新增数据 提交连接 使用批处理 两者都存在严重的效率问题,代码 ...

  4. TypeError: Cannot read property 'length' of null

    本文为博主原创,未经允许不得转载: 异常展示: [Vue warn]: Error in getter for watcher "filterAndSortData": " ...

  5. MapReduce编程：平均成绩

    问题描述 现在有三个文件分别代表学生的各科成绩,编程求各位同学的平均成绩.                     编程思想 map函数将姓名作为key,成绩作为value输出,reduce根据key ...

  6. 如何在nginx容器中使用ping、nslookup、ip、curl 等工具？

    Nginx镜像太精简了,启动一个容器进行测试时,常用的网络工具都没有,可以使用下面的命令进行安装.也可以直接起一个busybox容器进行测试. apt update #ping apt install ...

  7. 力扣（LeetCode）561. 数组拆分 I

    给定长度为 2n 的数组, 你的任务是将这些数分成 n 对, 例如 (a1, b1), (a2, b2), ..., (an, bn) ,使得从1 到 n 的 min(ai, bi) 总和最大. 示例 ...

  8. springboot启动配置原理之一（创建SpringApplication对象）

    几个重要的事件回调机制 配置在META-INF/spring.factories ApplicationContextInitializer SpringApplicationRunListener ...

  9. 文献导读 | A Pan-Cancer Analysis of Enhancer Expression in Nearly 9000 Patient Samples

    Chen, H., Li, C., Peng, X., Zhou, Z., Weinstein, J.N., Liang, H. and Cancer Genome Atlas Research Ne ...

  10. hdoj5769后缀自动机版本

    网上的题解都是后缀数组,我来个后缀自动机题解. 建好后缀自动机后由于后缀自动机是单向的,那么dfs一遍记录各节点的size,要保证一个节点只经过一次才是O(n),否则是O(n^2).表示这个节点及后面 ...