三、数据绑定

1、Vue中有2种数据绑定的方式

单向绑定(v-bind)：数据只能从data流向页面
双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data

备注

双向绑定一般都应用在表单类元素上（如：input、select等）

v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值

2、CODE

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>数据绑定</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root"><!-- 普通写法 --><!-- 单向数据绑定：<input type="text" v-bind:value="name"><br/>双向数据绑定：<input type="text" v-model:value="name"><br/> --><!-- 简写 -->单向数据绑定：<input type="text" :value="name"><br/>双向数据绑定：<input type="text" v-model="name"><br/><!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 --><!-- <h2 v-model:x="name">你好啊</h2> --></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el:'#root',data:{name:'测试数据'}})</script>
</html>

3、Result

三、【VUE基础】数据绑定相关推荐

SpringBoot+vue仿网易云音乐网站（三）- Springboot项目以及前端vue基础搭建
一.基础项目搭建 1. 新建springboot项目在搭建Springboot项目之前,需要的基础环境:JDK(8).Maven,工具Idea.项目就新建一个简单的springboot项目就行了,具 ...
Vue基础语法知识（自用，完整版）
Vue基础语法知识 1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象 2.root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法 3.root容器中里的代码被称为 ...
Vue基础-vue指令
一.vue基础-插值表达式 1.思考 1.以前改变标签内容,如何做? 2.用 Vue 有没有更简单的方式? 2.目的在dom标签中, 直接插入内容 3.语法又叫: 声明式渲染/文本插值语法: { ...
2022前端知识整理：十、vue基础
十.vue基础 2022前端知识整理:第十部分.vue基础,仅包含vue2.0相关知识,建议先完成html5.css3和JavaScript ES6之后再学习.部分图片未上传成功,稍后完善,请见谅. ...
Vue基础-09-表单输入绑定
Vue基础-09-表单输入绑定 Vue中想要操作表单的数据,无需再dom操作.比如登录.注册.添加 Vue中提供了一个指令v-model,可以表单的双向数据绑定双向绑定表单原始上面通过v-mode ...
vue基础，加少量的webpack，以及脚手架搭建vue项目
这是我学习vue基础时候的笔记,在b站上跟着敲的,一开始是有道云笔记的形式,为了上传到博客整理了两个小时改成了markdown的形式,喜欢的点个赞,谢谢. 文章目录一. vue基本使用 1. 实例参 ...
【VUE基础】Vuex
1. 什么是Vuex Vuex是一个专为Vue.js应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 其实最简单理解为,在我们写 ...
Vue 基础（二）
一.Vue基础 1.模板语法插值 a.文本{{ }} (mutache 语法糖,后面会详细讲解mutache) b.纯HTML c.表达式指令:是带有v-前缀的特殊属性 v-bind v-if v ...
Vue基础目录结构与代码
作者简介:一名计算机萌新.前来进行学习VUE,让我们一起进步吧. 座右铭:低头赶路,敬事如仪个人主页:我叫于豆豆吖的主页目录前言一.Vue.js 目录结构 1.目录解析二.Vue.js ...
Vue小字典-vue基础
Vue小字典 1.插值表达式声明式渲染/文本插值语法:{{ 表达式 }} 下面是vue变量 <template><div><h1>{{ msg }}</h ...

三、【VUE基础】数据绑定

三、数据绑定

1、Vue中有2种数据绑定的方式

2、CODE

3、Result

三、【VUE基础】数据绑定相关推荐

最新文章

热门文章