Vue模板语法中数据绑定
1.单项数据绑定
- <div id="di">
- <input type="text" :value="input_val">
- </div>
- <script>
- var app = new Vue({
- el: '#di',
- data: {
- input_val: 'hello world '
- }
- })
- </script>
通过浏览器 REPL 环境可以进行修改 app.input_val = 'Vue'
我们通过 vue 对象修改数据可以直接影响到 DOM 元素,但是,如果直接修改 DOM 元素,却不会影响到 vue 对象的数据;我们把这种现象称为 单向数据绑定 ;
2.双向数据绑定v-model:
- <div id="di">
- <input type="text" v-model="input_val" >
- </div>
- <script>
- var app = new Vue({
- el: '#di',
- data: {
- input_val: 'hello world '
- }
- })
- </script>
通过 v-model 指令展示表单数据,此时就完成了 双向数据绑定 ;
不管 DOM 元素还是 vue 对象,数据的改变都会影响到另一个;
2.1双向数据绑定的应用范围:
文本框 & 文本域
- <div id="di">
- <textarea v-model="inp_val"></textarea>
- <div>{{ inp_val }}</div>
- </div>
- <script>
- var app = new Vue({
- el: '#di',
- data: {
- inp_val: ''
- }
- })
- </script>
绑定复选框
- <div id="di">
- 吃饭:<input type="checkbox" value="eat" v-model="checklist"><br>
- 睡觉:<input type="checkbox" value="sleep" v-model="checklist"><br>
- {{ checklist }}
- </div>
- <script>
- var vm = new Vue({
- el: '#di',
- data: { checklist: []
- }
- });
- </script>
绑定单选框
- <div id="ap">
- 男<input type="radio" name="sex" value="男" v-model="sex">
- 女<input type="radio" name="sex" value="女" v-model="sex">
- <br>
- {{sex}}
- </div>
- <script>
- var vm = new Vue({
- el: '#ap',
- data: {
- sex: ''
- }
- });
- </script>
Vue模板语法中数据绑定的更多相关文章
- 初始Vue、Vue模板语法、数据绑定(2022/7/3)
文章目录 1.Vue简介 1.1.Vue的安装使用 1.2.实际的运用案例 1.3.vue开发工具的使用(这个需要在浏览器中安装) 2.初始Vue 2.1 .基础知识 2.1 .代码实例 2.2 .页 ...
- Vue 模板语法 && 数据绑定
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- Vue模板语法(二)
Vue模板语法(二) 样式绑定 class绑定 使用方式:v-bind:class="expression" expression的类型:字符串.数组.对象 1.2 style绑 ...
- Vue模板语法(一)
Vue模板语法 一.插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达 ...
- Vue模板语法(一)
Vue模板语法 一 vue简介 Vue.js是一套构建用户界面的渐进式框架. 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与 ...
- vue模板语法
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...
- (Vue)vue模板语法
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统. ...
- Vue模板语法与常用指令
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数,结合相应系统,在应用状态改变时 ...
- Vue模板语法(二)
Vue基础模板语法 二 1. 样式绑定 1.1 class绑定 使用方式:v-bind:class="expression" expression的类型:字符 ...
随机推荐
- oracle 查询数据一直提示:“error code [17004]; 无效的列类型”111111
oracle 查询数据一直提示:“error code [17004]; 无效的列类型”111111 问题场景:oracle,jpa,insert原因:插入的字段中有null.导致类型转换出问题,这个 ...
- 从数据表字段 float 和 double 说起
今天在公司讨论项目重构的问题时,公司的 DBA 针对表中的字段大概介绍了一下 float 和 double 的存储方式.然后,我发现这个问题又回到了浮点数类型在内存中的存储方式,即 IEEE 对浮点数 ...
- Ubuntu下预览raw格式图片
默认Ubuntu下资源管理器是不可以直接预览raw格式图片的,这就给查看图片带来很大的不便,下面我们就选择安装UFRaw来预览Raw格式图片 1. 首先在terminal安装UFRaw sudo ap ...
- python通过多线程并获取返回值
以下是多线程获取返回值的一种实现方式 # -*-coding:utf-8-*- from time import ctime, sleep import threading import numpy ...
- three.js实现土星绕太阳体系
概况如下: 1.SphereGeometry实现自转的太阳,土星: 2.RingGeometry实现土星公转轨道: 3.ImageUtils加载球体贴图: 4.canvas中createRadialG ...
- [Spring cloud 一步步实现广告系统] 6. Service实现&Zuul配置&Test
DAO层设计实现 这里我们使用Spring DATA JPA来实现数据库操作,当然大家也可以使用Mybatis,都是一样的,我们依然以用户表操作为例: /** * AdUserRepository f ...
- C#中获取多个对象list中对象共有的属性项
场景 有一组数据list<TestDataList> 每一个TestDataList是一个对象,此对象可能有温度数据,也可能没有温度数据. 有温度数据的情况下,温度数据属性又是一个list ...
- css字体标签相关
斜体: i:斜体em:斜体,强调的意思,有特殊含义,尽量用i或者cssfont-style:字体风格 normal默认值,italic斜体,oblique倾斜的字体 粗体: b,strong:粗体fo ...
- STL 中 list 的使用
list 容器实现了双向链表的数据结构,数据元素是通过链表指针串连成逻辑意义上的线性表,这样,对链表的任一位置的元素进行插入.删除和查找都是极快速的.由于list对象的节点并不要求在一段连续的内存中, ...
- 职位画像分析(pandas/ matplotlib)
一.数据分析的步骤 二.提出问题 (1) 分析数据分析师主要的技能排名? (2) 分析数据分析师薪资和岗位地点.学历.工作年限的关系? (3) 数据分析师的学历需求? (4) 不同城市数据分析师的需求 ...