Vue.js 数据绑定
1.标签内容绑定
- 双括号语法：使用 {{}} 将变量包裹起来，vue会将变量的值解析为普通文本，而非 HTML 代码
<div>{{msg}}</div>
<div>{{html}}</div>
data() {
return {
msg:"good day",
html:"<h2>我是h2</h2>"
}
}
渲染结果：
- v-html/v-text指令:相当于对当前标签元素中的innerHTML/innerText属性进行赋值
<div v-text="msg"></div>
<div v-html="html"></div>
data() {
return {
msg:"good day",
html:"<h2>我是h2</h2>"
}
}
渲染结果：
2.标签属性绑定
- 属性值绑定：在标签属性前加上":",即可将属性值当作变量进行解析
<!-- 不使用v-bind -->
<div title="msg">不使用v-bind:</div>
<!-- msg值为good day -->
<div v-bind:title="msg">使用v-bind:</div>
<!-- 简写 -->
<div :title="msg">使用v-bind:简写</div>
渲染结果：
<div title="msg">不使用v-bind:</div>
<div title="good day">使用v-bind:</div>
<div title="good day">使用v-bind:简写</div>
- 属性名绑定：属性名使用变量进行渲染
<body>
<div id="app">
<h2 :[attr]="value">{{msg}}</h2>
</div>
</body>
</html>
<script src="./vue.min.js"></script>
<script>
new Vue({
el:"#app",
data(){
return {
msg:"Vue.js 2.x",
attr:"title",
value:"我是参数值"
}
},
})
</script>
渲染结果：
<h2 title="我是参数值">Vue.js 2.x</h2>
3.双向数据绑定
- 使用v-model指令将数据与表单元素的值进行双向绑定，表单的初始状态通过其绑定的数据进行控制，同时切换表单的状态时，也会同步更新其绑定的数据
- 对于文本框和文本域，绑定其value属性，同时监听input事件
- 对于单选框和下拉框，绑定其value属性，同时监听change事件
- 对于多选框，通常为其绑定一个数组，选中的多选框的值会被push到数组中
- 实际开发中，不会使用原生的表单元素，通常都是使用UI框架自带的表单，使用方法参见相关文档
- 如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符
- 如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
<body>
<div id="app">
<input type="text" v-model.tirm="input" @input="onInput">
<input v-model.number="age" type="number">
</div>
</body>
</html>
<script src="./vue.min.js"></script>
<script>
new Vue({
el:"#app",
data(){
return {
input:"我是初始值"，
age: 20,
}
},
methods:{
onInput(){
console.log(this.input)
}
}
})
</script>
- 自定义组件中的model: v-model其实是v-bind和自定义事件的语法糖，通过v-bind将数据传递给子组件特定的prop，再通过触发特定的自定义事件，将子组件的数据同步给父组件,v-model相关的prop和自定义事件通过model字段进行定义
model:{
prop:"value",//定义v-model的值传递给那个prop属性
event:"input",//定义此事件触发时，自动更新父组件v-model对应的数据
}
4.样式绑定
- 对象语法：用于控制某个类名的添加和移除状态
<body>
<div id="app">
<!-- flag为true 添加active类 -->
<div :class="{'active':flag}">激活</div>
<!-- flag为false 移除active类 -->
<div :class="{'active':flag2}">未激活</div>
</div>
</body>
渲染结果：
<div id="app">
<div class="active">激活</div>
<div class="">未激活</div>
</div>
- 数组语法：用数组形式控制元素的classlist，数组元素可以是常量，也可以是变量
<body>
<div id="app">
<div :class="['box',color]">Vue.js</div>
</div>
</body>
<script>
new Vue({
el:"#app",
data(){
return {
color: 'red',
}
},
})
</script>
渲染结果：
<div id="app">
<div class="box red">Vue.js</div>
</div>
- 内联样式：通过v-bind指令，给style属性绑定一个对象，对象的属性名为样式名，对象的属性值为样式值
<body>
<div id="app">
<div :style="{'color':color,'font-size':size}">Vue.js</div>
</div>
</body>
<script>
new Vue({
el:"#app",
data(){
return {
color: 'red',
size: '18px'
}
},
})
</script>
渲染结果：
<div id="app">
<div style="color: red; font-size: 18px;">Vue.js</div>
</div>
4.元素的显示/隐藏/销毁
- v-if/v-else-if/v-else：指令值为布尔值，为true则对元素进行渲染，为false则销毁该元素
- v-show：控制元素的显示与隐藏，相当于操作display属性
- 注意，v-show 不支持 template 元素
<body>
<div id="app">
<div>
<div v-if="type=='a'">模版A</div>
<div v-else-if="type=='b'">模版B</div>
<div v-else>模版C</div>
</div>
<div>
<div v-show="type=='a'">模版A</div>
<div v-show="type=='b'">模版B</div>
<div v-show="type=='c'">模版C</div>
</div>
</div>
</body>
</html>
<script src="./vue.min.js"></script>
<script>
new Vue({
el:"#app",
data(){
return {
type: 'c'
}
},
})
</script>
渲染结果：
<div id="app">
<div>
<div>模版C</div>
</div>
<div>
<div style="display: none;">模版A</div>
<div style="display: none;">模版B</div>
<div>模版C</div>
</div>
</div>
5.模版循环
- 通过v-for指令，循环创建多个HTML模版，被循环对象可是是数组，对象，整数
- 不要与v-if进行混用，如有需要可对数组进行过滤操作再进行循环
- 循环整数时，第一个循环项是1
<body>
<div id="app">
<!-- 循环数组 -->
<ul>
<li v-for="(item,index) in list" :key="index">{{item}}</li>
</ul>
<!-- 循环对象 -->
<ul>
<li v-for="(val,key) in obj" :key="key">{{key}}:{{val}}</li>
</ul>
<!-- 循环整数 -->
<ul>
<li v-for="(n,index) in 5" :key="index">{{index}} - {{n}}</li>
</ul>
</div>
</body>
</html>
<script src="./vue.min.js"></script>
<script>
new Vue({
el:"#app",
data(){
return {
list:[1,2,3,4],
obj:{
name:'张三',age:20
}
}
},
})
</script>
6.v-for中的key
- 看看官方文档是怎么说的
当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。
- 如何理解这个“就地更新”
<!-- list = [ 1,2,3,4,5] -->
<ul>
<li v-for="(n,index) in list"style="margin-top:10px;">
<span>{{n}}</span>
<div class="btn" @click="handleDelete(n)">删除</div>
</li>
</ul>
- 一般情况下，这种模式不会有问题，但是也有例外，看看官方文档的说法
这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。
- 用实例来验证:相比上面的例子，多出了一个输入框，且这个输入框没有进行数据绑定
<!-- list = [ 1,2,3,4,5] -->
<ul>
<li v-for="(n,index) in list"style="margin-top:10px;">
<span>{{n}}</span>
<input type="text" style="padding:6px;">
<div class="btn" @click="handleDelete(n)">删除</div>
</li>
</ul>
- 如果为其设定了key，则数组发送变动时，不会复用之前的dom，就不会出现上面输入框异常的情形
<!-- list = [ 1,2,3,4,5] -->
<ul>
<li v-for="(n,index) in list" :key="n" style="margin-top:10px;">
<span>{{n}}</span>
<input type="text" style="padding:6px;">
<div class="btn" @click="handleDelete(n)">删除</div>
</li>
</ul>
- 下面的写法是等效的：循环数组用下标为key等于没写
<li v-for="(n,index) in list">
<li v-for="(n,index) in list" :key="index">
Vue.js 数据绑定的更多相关文章
- Vue.js 数据绑定语法详解
Vue.js 数据绑定语法详解 一.总结 一句话总结:Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue ...
- vue.js数据绑定
语法 插值 双大括号:{{text}} {{*text}}之渲染第一次 {{{html}}} 表达式(各种数值,变量,运算符的综合体) ...
- vue.js数据绑定语法
原始高清大图下载 1.数据绑定 html代码: <div id="first" class="first">msg:{{msg}}</div& ...
- Vuebnb 一个用 vue.js + Laravel 构建的全栈应用
今年我一直在写一本新书叫全栈Vue网站开发:Vue.js,Vuex和Laravel.它会在Packt出版社在2018年初出版. 这本书是围绕着一个案例研究项目,Vuebnb,简单克隆Airbnb.在这 ...
- Vue.js 基础指令实例讲解（各种数据绑定、表单渲染大总结）——新手入门、高手进阶
Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...
- vue.js基础知识篇(1):简介、数据绑定
目录第一章:vue.js是什么? 第二章:数据绑定第三章:指令第四章:计算属性第五章:表单控件绑定代码链接: http://pan.baidu.com/s/1qXCfzRI 密码: 5j79 第一章: ...
- 从Vue.js源码角度再看数据绑定
写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出.文章的原地址:https://github.com/an ...
- Vue.js 学习笔记 第2章 数据绑定和第一个Vue应用
本篇目录: 2.1 Vue实例与数据绑定 2.2 指令与事件 2.3 语法糖 学习任何一种框架,从一个Hello World应用开始是最快了解该框架特性的途径. 我们先从一段简单的HTML代码开始,感 ...
- Vue.js MVVM及数据绑定原理
什么是数据驱动 数据驱动是vuejs最大的特点.在vuejs中,所谓的数据驱动就是当数据发生变化的时候,用户界面发生相应的变化,开发者不需要手动的去修改dom. 比如说我们点击一个button,需要元 ...
- python70 前端框架之vue js的集中循环方式、key值的解释、input事件、v-model双向数据绑定、过滤案例、事件修饰符、按键修饰符、表单控制
js的几种循环方式 v-for可以循环的变量 可以循环的: 数组.数组带索引 对象.对象带key.value 字符串 字符串带索引 数字.数字带索引 <!DOCTYPE html> < ...
随机推荐
- 知识点考古：php5的面向对象学习笔记
闲来无事翻看以前收藏的资料,考古到保存的这篇文章对php的OOP的整理还很系统.原链接已经打不开(http://www.cublog.cn/u/17686/showart.php?id=146562) ...
- 一文搞定WeakHashMap
写在前面 在缓存场景下,由于内存是有限的,不能缓存所有对象,因此就需要一定的删除机制,淘汰掉一些对象.这个时候可能很快就想到了各种Cache数据过期策略,目前也有一些优秀的包提供了功能丰富的Cache ...
- 了解 Flutter 3.16 功能更新
作者 / Kevin Chisholm 我们在季度 Flutter 稳定版发布会上带来了 Flutter 3.16,此版本包含诸多更新: Material 3 成为新的默认主题.为 Android 带 ...
- C#上位机与PLC通信心跳的实现方法
-Begin- 大家好!我是付工.众所周知,在工业自动化控制系统中,上位机与下位机之间的通信是实现自动化生产的关键环节之一.为了确保通信的稳定性和可靠性,我们通用会采用一种被称为[心跳机制]的方法,它 ...
- 三，MyBatis-Plus 的各种查询的“超详细说明”，比如(等值查询，范围查询，模糊查询...)
三,MyBatis-Plus 的各种查询的"超详细说明",比如(等值查询,范围查询,模糊查询...) @ 目录 三,MyBatis-Plus 的各种查询的"超详细说明&q ...
- LeetCode 664. Strange Printer （DP）
题目: 有台奇怪的打印机有以下两个特殊要求: 打印机每次只能打印同一个字符序列.每次可以在任意起始和结束位置打印新字符,并且会覆盖掉原来已有的字符.给定一个只包含小写英文字母的字符串,你的任务是计算这 ...
- 百度ai只能回答怎么关闭
百度ai只能回答怎么关闭 要关闭百度的AI智能回答功能,可以通过以下几种方法实现: 使用广告拦截插件 安装广告拦截插件:如AdGuard.uBlock Origin等,这些插件可以帮助你 ...
- 鲲鹏（ARM64）+麒麟（Kylin v10）离线部署 KubeSphere
作者:社区用户-天行1st 本文将详细介绍,如何基于鲲鹏 CPU(ARM64) 和操作系统 Kylin V10 SP2/SP3,利用 KubeKey 制作 KubeSphere 和 Kubernete ...
- 云原生爱好者周刊：GitHub 官方文档终于开源了！
云原生一周动态要闻: API 在 Kubernetes 1.22 中被删除 ContainIQ 公开发布 - Kubernetes 本地实时监控! Sophos 收购 Capsule8 开源项目推荐 ...
- 如何正确的使用CMDB？
为什么说CMDB在企业中很难被使用起来?第一,CMDB的数据集成与准确性维护是一大挑战,因为需要确保来自多个异构IT系统的配置信息能够实时.准确地同步与更新.第二,复杂的IT环境和快速变化的业务需求使 ...