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开源作品19-通用数据库翻页查询
一.前言 在Qt与数据库结合编程的过程中,记录一多,基本上都需要用到翻页查看记录,翻页有个好处就是可以减轻显示数据的表格的压力,不需要一次性将数据库表的记录全部显示,也基本上没有谁在一页上需要一次性显 ...
- Spring Security默认登录页面代码位于哪里？
问:Spring Security默认登录页面代码位于哪里? 答:它是从此类生成的org.springframework.security.web.authentication.ui.DefaultL ...
- Python学习（六）——配套《PyTorch深度学习实战》
1. NumPy介绍 这张图片介绍了Python中两个非常重要的科学计算库:NumPy和SciPy,以及它们的核心功能和特性. NumPy NumPy(Numerical Python)是一个开源的P ...
- 监听sessionStorage中值的变化
应用场景:将登录接口所返回的用户信息存入sessionStorage,在其他地方需要使用到用户信息,但不知道什么时候接口请求完,此时可以监听sessionStorage中值的变化. 应用:Event自 ...
- nginx.conf参数优化详解
1.Niginx主配置文件参数详解 a.上面博客说了在Linux中安装nginx.博文地址为:http://www.cnblogs.com/hanyinglong/p/5102141.html b.当 ...
- Java线程的安全问题
当多个线程同时访问同一资源(变量,文件,记录),如果只有读操作,则不会有线程安全问题,如果有读和写操作,则会产生线程安全问题,必须保证共享数据同一时刻只能有同一个线程操作.Java采取的办法是sync ...
- Ping测试记录脚本
@echo off echo PingTest del PingTest_result.txt timeout /t 10 echo=> PingTest_result.txt :TEST ec ...
- flutter设置导航栏顶部标题与组件Text和Center和Container详解
无状态组件和有状态组件的介绍 StatelessWidget 是无状态组件,状态是不可以改变的 StatefulWidget 是有状态组件 持有的状态可能在 widge 生命周期中改变 Statele ...
- 简单聊一下*SWITCH*交换机的作用
交换机 交换机工作在数据链路层的物理设备或者说是接入层的物理设备,转发数据帧. 随着企业网络的发展,越来越多的用户需要接入到网络,交换机提供的大量的接入端口能够很好地满足这种需求.同时,交换机也彻底解 ...
- telegraf、influxdb和grafana
1 telegrafTelegraf 是一个开源的服务器代理,用于收集.处理和发送数据.它是 InfluxData 公司推出的 TICK 堆栈(Telegraf.InfluxDB.Chronograf ...