1.单项数据绑定

  1. <div id="di">
  2. <input type="text" :value="input_val">
  3. </div>
  4.  
  5. <script>
  6. var app = new Vue({
  7. el: '#di',
  8. data: {
  9. input_val: 'hello world '
  10. }
  11. })
  12. </script>

通过浏览器 REPL 环境可以进行修改 app.input_val = 'Vue'

我们通过 vue 对象修改数据可以直接影响到 DOM 元素,但是,如果直接修改 DOM 元素,却不会影响到 vue 对象的数据;我们把这种现象称为 单向数据绑定

2.双向数据绑定v-model:

  1. <div id="di">
  2. <input type="text" v-model="input_val" >
  3. </div>
  4.  
  5. <script>
  6. var app = new Vue({
  7. el: '#di',
  8. data: {
  9. input_val: 'hello world '
  10. }
  11. })
  12. </script>

通过 v-model 指令展示表单数据,此时就完成了 双向数据绑定

不管 DOM 元素还是 vue 对象,数据的改变都会影响到另一个;

2.1双向数据绑定的应用范围:

    文本框 & 文本域

  1. <div id="di">
  2. <textarea v-model="inp_val"></textarea>
  3. <div>{{ inp_val }}</div>
  4. </div>
  5.  
  6. <script>
  7. var app = new Vue({
  8. el: '#di',
  9. data: {
  10. inp_val: ''
  11. }
  12. })
  13. </script>

    绑定复选框

  1. <div id="di">
  2. 吃饭:<input type="checkbox" value="eat" v-model="checklist"><br>
  3. 睡觉:<input type="checkbox" value="sleep" v-model="checklist"><br>
  4. {{ checklist }}
  5. </div>
  6.  
  7. <script>
  8. var vm = new Vue({
  9. el: '#di',
  10. data: { checklist: []
  11. }
  12. });
  13. </script>

绑定单选框

  1. <div id="ap">
  2. <input type="radio" name="sex" value="男" v-model="sex">
  3. <input type="radio" name="sex" value="女" v-model="sex">
  4. <br>
  5. {{sex}}
  6. </div>
  7.  
  8. <script>
  9. var vm = new Vue({
  10. el: '#ap',
  11. data: {
  12. sex: ''
  13. }
  14. });
  15. </script>

Vue模板语法中数据绑定的更多相关文章

  1. 初始Vue、Vue模板语法、数据绑定(2022/7/3)

    文章目录 1.Vue简介 1.1.Vue的安装使用 1.2.实际的运用案例 1.3.vue开发工具的使用(这个需要在浏览器中安装) 2.初始Vue 2.1 .基础知识 2.1 .代码实例 2.2 .页 ...

  2. Vue 模板语法 && 数据绑定

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  3. Vue模板语法(二)

    Vue模板语法(二) 样式绑定  class绑定 使用方式:v-bind:class="expression" expression的类型:字符串.数组.对象 1.2 style绑 ...

  4. Vue模板语法(一)

    Vue模板语法 一.插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达 ...

  5. Vue模板语法(一)

    Vue模板语法 一 vue简介 Vue.js是一套构建用户界面的渐进式框架. 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与 ...

  6. vue模板语法

    Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...

  7. (Vue)vue模板语法

    Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统. ...

  8. Vue模板语法与常用指令

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数,结合相应系统,在应用状态改变时 ...

  9. Vue模板语法(二)

    Vue基础模板语法 二 1. 样式绑定 1.1 class绑定      使用方式:v-bind:class="expression"       expression的类型:字符 ...

随机推荐

  1. oracle 查询数据一直提示:“error code [17004]; 无效的列类型”111111

    oracle 查询数据一直提示:“error code [17004]; 无效的列类型”111111 问题场景:oracle,jpa,insert原因:插入的字段中有null.导致类型转换出问题,这个 ...

  2. 从数据表字段 float 和 double 说起

    今天在公司讨论项目重构的问题时,公司的 DBA 针对表中的字段大概介绍了一下 float 和 double 的存储方式.然后,我发现这个问题又回到了浮点数类型在内存中的存储方式,即 IEEE 对浮点数 ...

  3. Ubuntu下预览raw格式图片

    默认Ubuntu下资源管理器是不可以直接预览raw格式图片的,这就给查看图片带来很大的不便,下面我们就选择安装UFRaw来预览Raw格式图片 1. 首先在terminal安装UFRaw sudo ap ...

  4. python通过多线程并获取返回值

    以下是多线程获取返回值的一种实现方式 # -*-coding:utf-8-*- from time import ctime, sleep import threading import numpy ...

  5. three.js实现土星绕太阳体系

    概况如下: 1.SphereGeometry实现自转的太阳,土星: 2.RingGeometry实现土星公转轨道: 3.ImageUtils加载球体贴图: 4.canvas中createRadialG ...

  6. [Spring cloud 一步步实现广告系统] 6. Service实现&Zuul配置&Test

    DAO层设计实现 这里我们使用Spring DATA JPA来实现数据库操作,当然大家也可以使用Mybatis,都是一样的,我们依然以用户表操作为例: /** * AdUserRepository f ...

  7. C#中获取多个对象list中对象共有的属性项

    场景 有一组数据list<TestDataList> 每一个TestDataList是一个对象,此对象可能有温度数据,也可能没有温度数据. 有温度数据的情况下,温度数据属性又是一个list ...

  8. css字体标签相关

    斜体: i:斜体em:斜体,强调的意思,有特殊含义,尽量用i或者cssfont-style:字体风格 normal默认值,italic斜体,oblique倾斜的字体 粗体: b,strong:粗体fo ...

  9. STL 中 list 的使用

    list 容器实现了双向链表的数据结构,数据元素是通过链表指针串连成逻辑意义上的线性表,这样,对链表的任一位置的元素进行插入.删除和查找都是极快速的.由于list对象的节点并不要求在一段连续的内存中, ...

  10. 职位画像分析(pandas/ matplotlib)

    一.数据分析的步骤 二.提出问题 (1) 分析数据分析师主要的技能排名? (2) 分析数据分析师薪资和岗位地点.学历.工作年限的关系? (3) 数据分析师的学历需求? (4) 不同城市数据分析师的需求 ...