绑定属性 - 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- ...
随机推荐
- asp.net json,对象,字符串的相互转换
//object 转json格式字符串 public static string ObjectToJsonString(this object obj) { return JsonConvert.Se ...
- Vue监听属性的变化
监听属性的变化watch: { counter: function (nval, oval) { alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!') }}
- Dubbo和Spring Cloud微服务架构对比
https://blog.csdn.net/zhangweiwei2020/article/details/78646252
- 阿里技术专家详解Dubbo实践，演进及未来规划
https://mp.weixin.qq.com/s/9rVGHYfeE8yM2qkSVd2yEQ
- 拼接字符串，生成tree格式的JSON数组
之前做的执法文书的工作,现在需要从C#版本移植到网页版,从Thrift接口获取数据,加载到对应的控件中 之前用的easyui的Tree插件,通过<ul><li><span ...
- C# 视频多人脸识别的实现过程
整个项目是用虹软技术完成开发 上一篇内容的调整,提交到git了,https://github.com/catzhou2002/ArcFaceDemo 基本思路如下: 一.识别线程 1.获取当前图片 2 ...
- 解决跨域No 'Access-Control-Allow-Origin' header is present on the requested resource.
用angular发起http.get(),访问后端web API要数据,结果chrome报错:跨域了 Access to XMLHttpRequest at 'http://127.0.0.1:300 ...
- 封装一个使用cURL以POST方式请求https协议的公众方法
打开php7.2手册,搜索curl function getRequest($url,$type='get', $data = [], $timeout = 10) (需要更改){ $ssl = st ...
- 从swap说引用
C++的引用类型是个很奇妙的存在,比如下面这个例子: #include<iostream> using namespace std; void swap(int& a, int&a ...
- 【golang】kafka
这篇博客是用来记录用go安装及操作kafka库的时候踩到的坑~ 安装kafka库 首先我参考了博客:https://blog.csdn.net/tflasd1157/article/details/8 ...