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 ...
随机推荐
- Linux下获取文件名
linux 下一切皆文件 1.获取指定路径下文件或目录 ls -la /usr/local/ |grep xxx | head -n 1 |awk '{print$9}'xxx : 替换为要匹配的文件 ...
- WxPython跨平台开发框架之使用PyInstaller 进行打包处理
使用PyInstaller 打包Python项目是一个常见的需求,它可以将Python程序及其所有依赖项打包成一个独立的可执行文件或者安装文件,方便在没有安装Python环境的机器上运行.本随笔介绍W ...
- SpringBoot整合Netty+WebSocket
SpringBoot整合Netty+WebSocket 构建环境 pom.xml <?xml version="1.0" encoding="UTF-8" ...
- 第二章 dubbo源码解析目录
6.1 如何在spring中自定义xml标签 dubbo自定义了很多xml标签,例如<dubbo:application>,那么这些自定义标签是怎么与spring结合起来的呢?我们先看一个 ...
- Elasticsearch(6) --- Query查询和Filter查询
这篇博客主要分为 :Query查询和Filter查询.有关复合查询.聚合查询也会单独写篇博客. 一.概念 1.概念 一个查询语句究竟具有什么样的行为和得到什么结果,主要取决于它到底是处Query还是F ...
- OV7670寄存器说明
I2C读出来的内容的地址,比datasheet给出的小9? add- 0x0 = 0x0add- 0x1 = 0x76add- 0x2 = 0x73add- 0x3 = 0x4add- 0x4 = 0 ...
- C语言这种单细胞编程语言和指针的一些理解
转行做嵌入式也有一段时间了,原来做c#以及一些其它的上层语言, 本想的是也就是仅仅是语法上有点不一样.但是实际使用的切身体会真的是只有自己才知道.很多方面刷新了我对c语言以及计算机结构体系的认知 ,绝 ...
- 从整理扑克牌到字母异位词分组：一道巧妙的排序应用题 ｜LeetCode 49 字母异位词分组
LeetCode 49 字母异位词分组 点此看全部题解 LeetCode必刷100题:一份来自面试官的算法地图(题解持续更新中) 生活中的算法 你有没有玩过扑克牌?打完一局之后,我们通常会把散落的牌收 ...
- VirtualBox配置安装入门（Linux连不上网络和设置共享文件夹）
VirtualBox配置安装入门 一.设置虚拟网卡 1.安装了虚拟机之后,可以在网络选择网卡 网络分为网络地址转换(NAT).桥接网卡.内部网络.仅主机(Host-Only)网络,通用驱动.NAT网络 ...
- 本地部署DeepSeek-R1并使用自定义的知识库AnythingLLM
一.基础信息 1.概述 以下是私有化部署方案的优势: 性能卓越:提供媲美商业模型的对话交互体验 环境隔离:完全离线运行,杜绝数据外泄风险 数据可控:完全掌控数据资产,符合合规要求 2.硬件环境 CPU ...