绑定属性 - 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- ...
随机推荐
- java.lang.ClassNotFoundException: org.apache.commons.fileupload.FileItemFactory
运行servler报错 java.lang.NoClassDefFoundError: org/apache/commons/fileupload/FileItemFactory 或 java.lan ...
- 4、zabbix基本配置入门
Zabbix监控流程: Host group --> Hosts(向server端添加被监控主机) --> Application(在agent定义) --> Items(在appl ...
- mac git 删除本地仓库文件
递归清除本地文件夹下的Git文件,如果想重新建立仓库,那么在重新初始化新建的git仓库 //删除文件夹下的所有 .git 文件 find . -name ".git" | xarg ...
- HADOOP HA 踩坑 - org.apache.hadoop.hdfs.qjournal.protocol.JournalNotFormattedException: Journal Storage Directory /mnt/data1/hadoop/dfs/journal/hdfscluster not formatted
报错:在journalnode的log中: org.apache.hadoop.hdfs.qjournal.protocol.JournalNotFormattedException: Journal ...
- R 导出pdf设置字体
主要参考自: https://blog.csdn.net/xmuecor/article/details/51462172 library(showtext)showtext.auto(enable ...
- DAY6 元组、字典与集合
一.元组 定义:t1 = (1, 2) # t1 = tuple((1,2)) 特点:有序存储.可存放多个数据.不可变(内部可以包含可变对象,可变对象已久可变) 应用场景:将不允许操作的列表可以转化为 ...
- WingIDE 常用快捷键
Ctrl+N 新建文件 Ctrl+O 打开文件夹 Ctrl+W 关闭当前文件 Ctrl+S 保存文件 Ctrl+shif+S ...
- MDK编译过程
原博文:https://blog.csdn.net/qq_33894122/article/details/83994564
- LeetCode--018--四数之和（java）
给定一个包含 n 个整数的数组 nums 和一个目标值 target,判断 nums 中是否存在四个元素 a,b,c 和 d ,使得 a + b + c + d 的值与 target 相等?找出所有满 ...
- Matlab:导数边界值的有限元(Galerkin)法
tic; % this method is transform from Galerkin method %also call it as finit method %is used for solv ...