vue学习一（指令2.v-bind,v-model）
2.1.v-bind: 单向绑定（修改数据项，标签内容也改变；修改标签内容，数据项不会改变）
给html标签的属性绑定，可以用来动态修改class，简写 v-bind:style = :style
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Document</title>
7 </head>
8 <body>
9 <script src="../node_modules/vue/dist/vue.js"></script>
10 <!--给html标签的属性绑定-->
11 <div id="app">
12 <a v-bind:href="link">gogogo</a>
13 <!--动态修改class 单向绑定 v-bind:style = :style-->
14 <span v-bind:class="{active:isActive,'test-danager':iserror}"
15 v-bind:style="{color: color1,fontSize:size}">你好</span>
16 </div>
17 <script>
18 let vm = new Vue({
19 el:"#app",
20 data:{
21 link:"http://www.baidu.com",
22 isActive:true,
23 iserror:true,
24 color1:"red",
25 size:"20px"
26 }
27 })
28 </script>
29 </body>
30 </html>
2.2.v-model: 双向绑定(修改数据项，标签内容也改变；修改标签内容，数据项也改变)，一般用于表单项
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Document</title>
7 </head>
8 <body>
9 <script src="../node_modules/vue/dist/vue.js"></script>
10
11 <!--表单项自定义组件-->
12 <div id="app">
13 语言：<br/>
14 <input type="checkbox" v-model="language" value="java">java<br/>
15 <input type="checkbox" v-model="language" value="PHP">PHP<br/>
16 <input type="checkbox" v-model="language" value="javaAcript">javaAcript<br/>
17 <input type="checkbox" v-model="language" value="Python">Python<br/>
18 选中了{{language.join(",")}}
19 </div>
20 <script>
21 let vm = new Vue({
22 el:"#app",
23 data:{
24 language:[]
25 }
26 })
27 </script>
28 </body>
29 </html>
截图来展示双项绑定：
浏览器上的vue是需要安装插件：有兴趣的看 https://www.cnblogs.com/wanglli/p/13182514.html
vue学习一（指令2.v-bind,v-model）的更多相关文章
- VUE学习-自定义指令
自定义指令 有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令. <div id="directive-demo"> <input ...
- Vue学习-基本指令
一.关于vue介绍:https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247485737&idx=1&sn=14fe ...
- vue学习之指令简写以及事件笔记
1.v-bind:××× 可简写为 :××× 2.v-on:××× 可简写为 @××× 例: v-on:click 可简写为 @click (官网文档介绍) 3.vue处理事件 <!-- 阻止单 ...
- vue学习笔记（一） ---- vue指令（总体大纲）
一.什么是Vue 官方文档:https://cn.vuejs.org/v2/guide/ 关键字: 渐进式框架 自底向上增量开发 视图层 单文件组件 复杂的单页应用 复杂的单页应用: 顾名思义,单页应 ...
- vue学习-day02（自定义指令，生命周期）
目录: 1.案例:品牌管理 2.Vue-devtools的两种安装方式 3.过滤器,自定义全局或私有过滤器 4.鼠标按键事件的修饰符 5.自定义全局指令:让文本框获取焦点 ...
- vue学习-day01（vue指令）
目录: 1.什么是vue.js 2.为什么要学习前端的流行框架 3.框架和库的区别 4.后端MVC和前端的MVVM的区别 5.vue.js的基本代码--hollo world代 ...
- 学习动态性能表(4)--v$sqltext&v$sqlarea
学习动态性能表 第四篇-(1)-V$SQLTEXT 2007.5.29 本视图包括Shared pool中SQL语句的完整文本,一条SQL语句可能分成多个块被保存于多个记录内. 注:V$SQLARE ...
- 学习动态性能表(14)--v$parameter&v$system_parameter
学习动态性能表 第14篇--V$PARAMETER&V$SYSTEM_PARAMETER 2007.6.11 这两个视图列出的各参数项名称以及参数值.V$PARAMETER显示执行查询的se ...
- vue学习（二）Vue常用指令
2 Vue常用指令 1. vue的使用要从创建Vue对象开始 var vm = new Vue(); 2. 创建vue对象的时候,需要传递参数,是json对象,json对象对象必须至少有两个属性成员 ...
- vue学习04 v-on指令
vue学习04 v-on指令 v-on的作用是为元素绑定事件,比如click单击,dbclick双击 v-on指令可简写为@ 代码测试 <!DOCTYPE html> <html l ...
随机推荐
- Qt开发经验小技巧111-120
在不同的平台上文件路径的斜杠也是不一样的,比如linux系统一般都是 / 斜杠,而在windows上都是 \ 两个反斜杠,Qt本身程序内部无论在win还是linux都支持 / 斜杠的路径,但是一些第三 ...
- EPPlus使用方法---Excel处理我觉得超级好用
目前只是用到导出Excel功能,导出大规模数据量速度也很快,而且比较容易操作(最起码导出是,暂时没有用到处理已存在的excel功能,有人说NPOI也好用,试了一下,最起码导出这个不如EPPlus ...
- 对CGAL5.0及以后版本编译的说明
CGAL5.0及以后版本只有头文件,没有库文件了.这意味着CGAL无需编译,只需安装好CGAL的依赖项即可.类似Eigen库.
- C# .Net FrameWork3.5中异步HTTP请求时，由于安全协议的问题System.Net.HttpWebRequest.EndGetResponse(IAsyncResult asyncResult)方法抛出“基础连接已经关闭: 发送时发生错误”的解决办法
现象描述: C# .Net FrameWork3.5中异步HTTP请求时,由于安全协议的问题System.Net.HttpWebRequest.EndGetResponse(IAsyncResult ...
- 即时通讯技术文集（第45期）：微信、QQ技术精华合集(Part2) [共14篇]
为了更好地分类阅读 52im.net 总计1000多篇精编文章,我将在每周三推送新的一期技术文集,本次是第45 期. [-1-] QQ音乐团队分享:Android中的图片压缩技术详解(上篇) [链接 ...
- CH32V203F6P6-TSSOP20测试之03---三种烧录方式
CH32V203F6P6-TSSOP20支持三种下载方式:USB下载.串口下载(用串口2即8脚PA2为TX2接下载的RX,9脚PA3为RX2接下载的TX)和SWD两线下载. CH32V203F6P6- ...
- CF div3 991（A~G）
蒟蒻的第一篇题解.由于正值期末周,只能匆忙地vp了一场div3,并只出了A~E. A 白给模拟题,但也是失误很大的一个题(7分钟时才出,属实是太慢了...) B 一道典题,之前做过类似的. 统计所有数 ...
- 把.netcore console 安装到Windows 系统服务。
用个工具:NSSM 下载:最新的那个pre版本 http://www.nssm.cc/download 测试.netcore 的一个控制台程序(Console),仅仅用来定时写入一些日志, 代码如下: ...
- Mac配置apache cgi服务
CGI(Common Gateway Interface),通用网关接口,它是一段程序,运行在服务器上如:HTTP服务器,提供同客户端HTML页面的接口 Mac上是自带CGI运行程序的,但是直接是不可 ...
- Redisson实现分布式锁---原理
Redisson实现分布式锁(1)---原理 有关Redisson作为实现分布式锁,总的分3大模块来讲. 1.Redisson实现分布式锁原理 2.Redisson实现分布式锁的源码解析 3.Redi ...