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 ...
随机推荐
- [转]C#从MySQL数据库中读取
实现了数据库的建表.存储数据的功能后,还需要实现数据库的读取,综合查资料后发现有两种发发比较好; 一.如需要界面操作,需要将数据表格在界面上显示出来的话,需要使用DataGrid控件. 基本操作流程: ...
- Python 进阶：深入理解 import 机制与 importlib 的妙用
大家好,今天我们来深入探讨 Python 中的导入机制和 importlib 模块.相信不少朋友和我一样,平时写代码时可能只用过最基础的 import 语句,或者偶尔用 importlib.impor ...
- [开源项目]YOLOv8_Efficient
Yolov8_Efficient Simple and efficient use for yolov8 About This is an unofficial repository maintain ...
- linxux学习01
Linux第一天 1.为什么要学习linux? 因为大数据中绝大部分核心组件都是基于linux操作系统运行的,企业中基本上都是linux系统. 2.怎么去学linux?(什么是大数据) 大数据技术组件 ...
- java解析CSV文件三种方法(openCSV)
一.简介1.pom.xml<!-- csv文件解析依赖 --><dependency> <groupId>com.opencsv</groupId> & ...
- biancheng-HBase
目录http://c.biancheng.net/view/6509.html 1HBase是什么?2HBase的优势有哪些?3Hadoop与HBase的关系4HDFS5HDFS的特点与使用场景6HB ...
- w3cschool-Hadoop 教程
https://www.w3cschool.cn/hadoop/ 铺垫 人产生数据的速度越来越快,机器则更加快,数据的增长速度通常比算法更快,所以需要另外的一种处理数据的方法. 硬盘的容量增加了,但性 ...
- 项目PMP之八项目质量管理
项目PMP之八--项目质量管理 一.定义:以执行组织的名义支持过程的持续改进活动 核心理念:兼顾项目管理和可交付成果两方面 质量影响程度(代价由大到小):客户发现缺陷 > 交付前检测和纠正缺 ...
- python包学习：-了解
本节先做一些了解. numpy 参考:NumPy使用 NumPy 教程 NumPy是Python中科学计算的基础包.它是一个Python库,提供多维数组对象,各种派生对象(如掩码数组和矩阵),以及用于 ...
- C#中根据传入的字符串字段返回实体Lambda表达式
我们在操作实体的时候,经常会使用到Lambda表达式,如下所示就是对实体IOT_Sample的CrtTime进行操作: var ret = NestExtension.GetSort<IOT_S ...