【转】Vue v-bind与v-model的区别
v-model 指令在表单控件元素上创建双向数据绑定,所谓双向绑定，指的就是我们在js中的vue实例中
的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据
最基础的就是实现一个联动的效果
vue v-bind绑定属性和样式
这期跟大家分享的，是v-bind指令。它可以往元素的属性中绑定数据，也可以动态地根据数据为元素绑定不同的样式。
绑定属性
最简单的例子，我们有一张图片，需要定义图片的src。我们可以直接在元素的属性里面定义：
<div id="app">
<img src="https://cn.vuejs.org/images/logo.png" alt="">
</div>
<!-- ... ... -->
<script type="text/javascript">
var app = new Vue({
el: '#app'
});
</script>但是在实际工作中，我们通常会遇到的情况是，图片地址是从数据里返回的，这个时候v-bind指令就派上了用场。当然，我们可以同时绑定各种属性：
<div id="app">
<img v-bind:src="imgSrc" v-bind:alt="imgAlt" v-bind:title="imgTitle">
</div>
<!-- ... ... -->
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
imgSrc: 'https://cn.vuejs.org/images/logo.png',
imgAlt: 'vue-logo',
imgTitle: '这是你指定的title，主人'
}
});
</script>在浏览器可以看到效果：
这时候你也许会说，每次都要写一遍v-bind好麻烦。没问题，Vue为你准备好了简写的方式：
<div id="app">
<img :src="imgSrc" :alt="imgAlt" :title="imgTitle">
</div>绑定行内样式
v-bind也可以用于绑定样式，使用行内样式时，关键字是style，跟在html里面直接写行内样式类似。注意样式的写法跟css会有些许不同，横杠分词变成驼峰式分词。
<div id="app">
<button class="btn" :style="{ color: 'white', backgroundColor: 'blue' }">点击我吧，主人！</button>
</div>当然，把样式写在vue的data里面会方便一些：
<div id="app">
<button class="btn" :style="styles">点击我吧，主人！</button>
</div>
<!-- ... ... -->
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
styles: {
color: 'white',
backgroundColor: 'blue'
}
}
});
</script>在浏览器中可以看到html中的行内样式：
绑定CSS样式
更常见的做法肯定是根据数据绑定不同的样式了。这时关键字是class。【注意：v-bind:class指令可以与普通的class特性共存】
<style>
.is-active {
color: white;
background-color: green;
}
</style>
<body>
<div id="app">
<!-- 根据数据中isActive来决定是否把is-active这个class加给元素 -->
<button class="btn" :class="{ 'is-active': isActive }">点击我吧，主人！</button>
</div>
<!-- ... ... -->
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
isActive: true
}
});
</script>
</body>效果如图：
当然，在实际工作中isActive的值一般不会像例子中这样直接写死，而是根据用户的交互或者数据进行判断。
传递静态或动态 Prop
像这样，你已经知道了可以像这样给 prop 传入一个静态的值：
<blog-post title="My journey with Vue"></blog-post>你也知道 prop 可以通过 v-bind 动态赋值，例如：
<!-- 动态赋予一个变量的值 -->
<blog-post v-bind:title="post.title"></blog-post>
<!-- 动态赋予一个复杂表达式的值 -->
<blog-post
v-bind:title="post.title + ' by ' + post.author.name"
></blog-post>【转】Vue v-bind与v-model的区别的更多相关文章
- vue.js中compted与model的区别
在p便签内写的{{reversemessage}}方法,若js里对应的函数为computed则不需要加上括号 若js里对应的函数为model则应该将{{reversemessage}}改为{{reve ...
- 启动服务报错：nested exception is java.lang.NoSuchMethodError: org.apache.cxf.common.jaxb.JAXBUtils.closeUnmarshaller(Ljavax/xml/bind/Unmarshaller;)V
1.启动tomcat时报错:Error creating bean with name 'payInfService': Invocation of init method failed; neste ...
- What is the difference between Reactjs and Rxjs?--React is the V (View) in MVC (Model/View/Controller).
This is really different, React is view library; and Rxjs is reactive programming library for javasc ...
- Oracle基本数据字典:v$database、v$instance、v$version、dba_objects
v$database: 视图结构: SQL> desc v$database; Name Null? Type - ...
- POJ2762 Going from u to v or from v to u(单连通 缩点)
判断图是否单连通,先用强连通分图处理,再拓扑排序,需注意: 符合要求的不一定是链拓扑排序列结果唯一,即在队列中的元素始终只有一个 #include<cstdio> #include< ...
- Going from u to v or from v to u?_POJ2762强连通+并查集缩点+拓扑排序
Going from u to v or from v to u? Time Limit: 2000MS Memory Limit: 65536K Description I ...
- 临时文件相关的v$tempfile v$sort_usage与V$tempseg_usage
SQL> select username,user,segtype,segfile#,segblk#,extents,segrfno# from v$sort_usage; SEGFILE#代表 ...
- [强连通分量] POJ 2762 Going from u to v or from v to u?
Going from u to v or from v to u? Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 17089 ...
- POJ2762 Going from u to v or from v to u?（判定单连通图：强连通分量+缩点+拓扑排序）
这道题要判断一张有向图是否是单连通图,即图中是否任意两点u和v都存在u到v或v到u的路径. 方法是,找出图中所有强连通分量,强连通分量上的点肯定也是满足单连通性的,然后对强连通分量进行缩点,缩点后就变 ...
- poj 2762 Going from u to v or from v to u?
题目描述:为了让他们的儿子变得更勇敢些,Jiajia和Wind将他们带到一个大洞穴中.洞穴中有n个房间,有一些单向的通道连接某些房间.每次,Wind选择两个房间x和y,要求他们的一个儿子从一个房间走到 ...
随机推荐
- 前端PHP入门-027-数组常用函数-掌握级别
下面的函数一定要到熟悉甚至到掌握级别. 这些函数,也是面试中基础面试中最爱问到的问题. 函数名 功能 array_combine() 生成一个数组,用一个数组的值作为键名,另一个数组值作为值 rang ...
- [DeeplearningAI笔记]序列模型1.1-1.2序列模型及其数学符号定义
5.1循环序列模型 觉得有用的话,欢迎一起讨论相互学习~Follow Me 1.1什么是序列模型 在进行语音识别时,给定了一个输入音频片段X,并要求输出片段对应的文字记录Y,这个例子中的输入和输出都输 ...
- 分享 koa + mysql 的开发流程，构建 node server端，一次搭建个人博客
前言 由于一直在用 vue 写业务,为了熟悉下 react 开发模式,所以选择了 react.数据库一开始用的是 mongodb,后来换成 mysql 了,一套下来感觉 mysql 也挺好上手的.re ...
- 2-sat基础题 BZOJ 1823
http://www.lydsy.com/JudgeOnline/problem.php?id=1823 1823: [JSOI2010]满汉全席 Time Limit: 10 Sec Memory ...
- 816C. Karen and Game 贪心
LINK 题意:给出n*m的矩阵图,现有对行或对列上的数减1的操作,问最少几步使所有数变为0,无解输出-1 思路:贪心暴力即可.先操作行和先操作列结果可能不同注意比较. /** @Date : 201 ...
- 前端开发必知必会：CSS Position 全解析
此文根据Steven Bradley的<How Well Do You Understand CSS Positioning?>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之处 ...
- 【BZOJ】2440: [中山市选2011]完全平方数
[题意]T次询问第k小的非完全平方数倍数的数.T<=50,k<=10^9.(即无平方因子数——素因数指数皆为0或1的数) [算法]数论(莫比乌斯函数) [题解]考虑二分,转化为询问[1,x ...
- 从INT_MAX和INT_MIN看补码
刷一道题的时候遇到INT_MAX和INT_MIN的问题,有些东西忘了,梳理一下. INT_MAX为2147483647,INT_MIN为-2147483648,为什么MIN的绝对值比MAX多1呢,因为 ...
- HDU 1081 To The Max （dp）
题目链接 Problem Description Given a two-dimensional array of positive and negative integers, a sub-rect ...
- Python3 动态导入模块的两种方式
动态导入模块就是只知道str类型的模块名字符串,通过这个字符串导入模块 需要导入的模块: #!/usr/bin/env python # _*_ coding:utf-8 _*_ # Author:C ...