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开源作品37-网络中转服务器
一.前言 用Qt做开发10年了,其中做过好多项目,基于现在web和移动互联网发展如此迅猛,大量的应用场景需要一个网络中转服务器,可以实现手机app或者其他客户端远程回控设备,现在物联网发展非常迅猛,这 ...
- 微信小游戏直播在Android端的跨进程渲染推流实践
本文由微信开发团队工程师"virwu"分享. 1.引言 近期,微信小游戏支持了视频号一键开播,将微信升级到最新版本,打开腾讯系小游戏(如跳一跳.欢乐斗地主等),在右上角菜单就可以看 ...
- uniapp请求封装-token无感刷新
当前是vue3+ts版本的封装 vue3+js版本请求封装可参考 https://www.cnblogs.com/lovejielive/p/14343619.html token无感刷新,可自行删除 ...
- 成为百万架构师的第一课：设计模式：Spring中的设计模式
本文原文地址 Spring5 源码分析 一·.Spring 中常用的设计模式 1.我们通常说的23种经典设计模式: 分类 设计模式 创建型 工厂方法(Factory Method).抽象工厂模式(Ab ...
- G1原理—6.G1垃圾回收过程之Full GC
大纲 1.FGC的一些前置处理 2.FGC的整体流程 3.传统FGC只能串行化 + G1的FGC可以并发化 4.并行化FGC之并行标记 + 任务窃取 5.并行化FGC之跨分区压缩 + 避免对象跨分区 ...
- c# 微软小冰-虚拟女友聊天
using Newtonsoft.Json; using System; using System.Collections.Generic; using System.IO; using System ...
- 从单体架构、到SOA、再到微服务的架构设计详解
本文涉及的内容以及知识点如下: 1.单体架构 2.单体架构的拆分 3.SOA与微服务的区别 4.微服务的优缺点 5.微服务的消息 6.服务集成 7.数据的去中心化 单体架构 Web应用程序发展的早期, ...
- Java底层知识面试题
JVM内存结构class文件格式JVM不会理解我们写的Java源文件, 我们必须把Java源文件编译成class文件, 才能被JVM识别, 对于JVM而言,class文件相当于一个接口class文件是 ...
- G1原理—8.如何优化G1中的YGC
大纲 1.5千QPS的数据报表系统发生性能抖动的优化(停顿时间太小导致新生代上不去) 2.由于产生大量大对象导致系统吞吐量降低的优化(大对象太多频繁Mixed GC) 3.YGC其他相关参数优化之TL ...
- Java实现LDAP登录
LDAP的全称是Lightweight Directory Access Protocol(轻量级目录访问协议),是一种用于访问和管理分布式目录信息服务的应用协议.LDAP通常用于存储用户.组和其他组 ...