绑定属性 - v-bind
未绑定
<!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的更多相关文章
- [十六]SpringBoot 之 读取环境变量和绑定属性对象
1.读取环境变量 凡是被spring管理的类,实现接口EnvironmentAware 重写方法 setEnvironment 可以在工程启动时,获取到系统环境变量和application配置文件中的 ...
- jQuery事件绑定on()、bind()与delegate() 方法详解
jquery中有四种事件绑定函数,bind(),live(),on(),delegate(),由于live现在并不常用,因此不做过多解释. 1. bind()用法 $("div p" ...
- Compounding绑定属性
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- react事件处理函数中绑定this的bind()函数
问题引入 import React, { Component } from 'react'; import { Text, View } from 'react-native'; export def ...
- class中限定绑定属性__slots__方法
使用__slots__但是,如果我们想要限制class的属性怎么办?比如,只允许对Student实例添加name和age属性.为了达到限制的目的,Python允许在定义class的时候,定义一个特殊的 ...
- Vue 目录结构 绑定数据 绑定属性 循环渲染数据
一.目录结构分析 node_modules 项目所需要的各种依赖 src 开发用的资源 assets 静态资源文件 App.vue 根组件 main.js 配置路由时会用 .babelrc 配置文件 ...
- v-bind绑定属性样式——class的三种绑定方式
1.布尔值的绑定方式 <div id="demo"> <span v-bind:class="{‘class-a‘:isA ,‘class-b‘:isB ...
- React对比Vue（02 绑定属性，图片引入，数组循环等对比）
import React, { Component } from 'react'; import girl from '../assets/images/1.jpg' //这个是全局的不要this.s ...
- Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定
Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定 创建 angular 组件 https://github.com/angular/angular- ...
随机推荐
- 剑指offer（45）扑克牌顺子
题目描述 LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本是54张^_^)...他随机从中抽出了5张牌,想测测自己的手气,看看能不能抽到顺子,如果抽到的话,他决 ...
- react-router 4.0（二）传参
import React from 'react'; import ReactDOM from 'react-dom' import {Link,Route,HashRouter} from 'rea ...
- P5205 【模板】多项式开根
思路 按如下式子计算即可 \[ B(x)=\frac{A(x)+B'^2(x)}{2B'(x)} \] 代码 // luogu-judger-enable-o2 #include <cstdio ...
- 【C++】10.18日的C++笔记
使用memset初始化一个类会导致类中的指针和虚函数表出现问题.相关链接 使用memset(a,1,sizeof(a))初始化a数组不会达到预期的效果,因为memset会把每个字节赋值为1就会变成16 ...
- js打开新页面的方式：
1.超链接<a href="http://www.jb51.net" title="脚本之家">Welcome</a>等效于js代码wi ...
- 【Core内存】.NET Core 2.0中使用MemoryCache
说到内存缓存大家可能立马想到了HttpRuntime.Cache,它位于System.Web命名空间下,但是在ASP.NET Core中System.Web已经不复存在.今儿个就简单的聊聊如何在ASP ...
- [shell] 脚本使用 【记录】
1.nginx日志切割 vi /var/log/nginx/cut_nginx_log.sh #!/bin/bash date=$(date +%F -d -1day) cd /var/log/ngi ...
- [Hibernate] 通过 properties 类和 hql 语句进行动态查询
//需要保证Emp和EmpProperties中的setter和getter以及属性以及 参数占位符(:eName) 的一致//动态查询 @Test public void test4(){ EmpP ...
- Juploader 1.0 谷歌(chrome)浏览器中成功上传文件后返回信息异常
在项目中使用了Juploader 1.0无刷新上传文件的js组件,在IE8以上没有问题,代码如下: function InitialUploadDirectly(OnUploadFunc, butto ...
- Spring boot连接MongoDB集群
主要问题是:MongoDB集群分为复制集(replicaSet)与分片集(shardingSet),那么如何去连接这两种集群: 参考官方文档,我使用了最通用的方法:通过构造connection str ...