v-bind和v-model的本质区别和作用域
每篇一句
一场寂寞凭谁诉。算前言,总轻负。
Vue视图数据展示方式和彼此的区别:
{{插值表达式}}
- {{}}插值表达式里面 只能写表达式,不能写语句
- 文本输出,不会解析标签
- 不能作用在标签的属性上,设置属性值,只能用于标签内部用于显示数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>入门案例</title>
<!--引入vue-->
<script src="js/vue.js"></script>
</head>
<body>
<!--view视图展示数据-->
<div id="app">
<!--{{插值表达式}} vue显示数据方式-->
{{message}} ======{{number+1}}===={{flag ? "真":"假"}}
</div>
</body>
<!--模型-->
<script>
var vue = new Vue({
el:"#app", //将id为app的区域 交给vue管理
data:{
message:"hello vue .....", //声明初始化模型数据
number:18,
flag:false
},
methods:{
//所有方法
}
})
</script>
</html>
v-text和v-html
- v-text不会解析标签,只能解析文本
- v-html会解析标签,之后显示
- 两者只能作用域属性上,是一种属性修饰符,不能写在标签体内
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-text和v-html.html</title>
<script src="../js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
插值表达式不会解析标签<br>
{{message}}
<hr>
v-text:不会解析html,只能解析文本
<div v-text="message"></div>
<hr>
v-html : 可以解析标签和文本
<div v-html="message"></div>
<hr>
不能写在标签体内
<div> v-html="message"</div>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "<h1>Hello VUE</h1>"
}
});
</script>
</html>
v-bind
- 只能作用域属性上,是一种属性修饰符
- 省略写法是
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind</title>
<script src="../js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<h1 style="text-align: center">插值表达式不能作用在标签的属性上,遇到这种情况就要使用v-bing</h1>
<font size="5" v-bind:color="ysl">坚持下去!</font>
<font size="5" :color="ysl2">坚持下去!</font>
<hr>
<a v-bind={href:"http://www.baidu.com/"+info}>百度搜索java</a><br>
<a :href="address">京东</a>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
ysl:"red",
ysl2:"green",
info:"s?wd=java",
address:"http://www.jd.com"
}
});
</script>
</html>
还有一种特殊的:v-model数据双向绑定
- 前面的都只能显示vue对象中数据, 页面数据的变化不会影响vue对象中的数据
- 而v-model绑定的数据,页面数据的改变,vue对象中的数据也会跟着改变,这非常关键
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model</title>
<script src="../js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<h1>需求:使用vue赋值json数据,并显示到页面的输入框中(表单回显)。
点击提交按钮,改变json数据,验证同时输入框的内容也发生改变。
</h1>
插值表达式: {{user.username}} ,{{user.password}} <br>
v-model 双向绑定,输入的值会改变模型的值:<input type="text" v-model="user.username"> <br>
v-bind 单向绑定,输入的值不会改变模型的值:<input type="text" v-bind:value="user.username"> <br>
v-model 密码:<input type="text" v-model="user.password"> <br>
<input type="button" @click="fun()" value="按钮(改变模型的值)"> <br>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
user:{
username:"路飞",
password:"123456"
}
},
methods:{
fun:function () {
alert(this.user.username+" "+this.user.password);
this.user.username="佐助";
this.user.password="666666";
}
}
});
</script>
</html>
v-bind和v-model的本质区别和作用域的更多相关文章
- 启动服务报错: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 ...
- 【转】HTTP POST GET 本质区别详解
一 原理区别 一般在浏览器中输入网址访问资源都是通过GET方式:在FORM提交中,可以通过Method指定提交方式为GET或者POST,默认为GET提交 Http定义了与服务器交互的不同方法,最基本的 ...
- HTTP POST GET 本质区别详解
HTTP POST GET 本质区别详解 一 原理区别 一般在浏览器中输入网址访问资源都是通过GET方式:在FORM提交中,可以通过Method指定提交方式为GET或者POST,默认为GET提交 Ht ...
- 转-HTTP POST GET SOAP本质区别详解
原文链接:HTTP POST GET SOAP本质区别详解 一 原理区别 一般在浏览器中输入网址访问资源都是通过GET方式:在FORM提交中,可以通过Method指定提交方式为GET或者POST,默认 ...
- httpServeltRequest和Model传值的区别
需要将请求发过来的数据(或者说参数)传递到重定向的页面/转发的页面的时候,就要用到>>model.addAttribute("mine", UserUtils.getC ...
- 【转载】HTTP POST GET SOAP本质区别详解
一 原理区别 一般在浏览器中输入网址访问资源都是通过GET方式:在FORM提交中,可以通过Method指定提交方式为GET或者POST,默认为GET提交 Http定义了与服务器交互的不同方法,最基本的 ...
- 转:oracle几组重要的常见视图-v$latch,v$latch_children,v$lock,v$locked_object
v$latch Oracle Rdbms应用了各种不同类型的锁定机制,latch即是其中的一种.Latch是用于保护SGA区中共享数据结构的一种串行化锁定机制.Latch的实现是与操作系统相关的, 尤 ...
- oracle 入门笔记--v$sql和v$sqlarea视图(转载)
转载于作者:dbtan 原文链接:http://www.dbtan.com/2009/12/vsql-and-vsqlarea-view.html v$sql和v$sqlarea视图: 上文提到,v$ ...
随机推荐
- 详解SpringBoot应用跨域访问解决方案
一.什么是跨域访问 说到跨域访问,必须先解释一个名词:同源策略.所谓同源策略就是在浏览器端出于安全考量,向服务端发起请求必须满足:协议相同.Host(ip)相同.端口相同的条件,否则访问将被禁止,该访 ...
- Matlab 在线使用 | 推荐
Matlab 在线使用 | 推荐
- PHP过滤换行的方法
PHP过滤换行的方法 <pre> public function trimall($str) { $qian = array(" ", " ", & ...
- 部署django
添加uwagi配置文件 在你项目的根目录中创建mysite.xml(名字无所谓),或者创建mysite.ini,输入以下内容: <uwsgi> <socket>127.0.0. ...
- Windows下mysql的下载和安装
下载: 1.下载地址:https://www.mysql.com/downloads/ 2.选择社区版:MySQL Community (GPL) Downloads » 3.MySQL Commun ...
- windows7设置定时任务运行ThinkPHP框架程序
1. 设置Windows的任务计划 可以参考win7计划任务的设置方法 2. 新建Windows执行文件bat 新建cron.bat文件,内容如下: D: cd \wamp\www\tp32 D:\w ...
- MySQL InnoDB 实现高并发原理
MySQL 原理篇 MySQL 索引机制 MySQL 体系结构及存储引擎 MySQL 语句执行过程详解 MySQL 执行计划详解 MySQL InnoDB 缓冲池 MySQL InnoDB 事务 My ...
- poj 3974 Palindrome (manacher)
Palindrome Time Limit: 15000MS Memory Limit: 65536K Total Submissions: 12616 Accepted: 4769 Desc ...
- 领扣(LeetCode)单词模式 个人题解
给定一种 pattern(模式) 和一个字符串 str ,判断 str 是否遵循相同的模式. 这里的遵循指完全匹配,例如, pattern 里的每个字母和字符串 str 中的每个非空单词之间存在着双向 ...
- spring boot集成shiro-redis时,分布式根据seesionId获取session报错排查总结
昨天在集成shiro-redis的时候,使用sessionId在其他微服务获取用户的session时,发生错误:There is no session with id [xxx]. 查遍了所有资料,基 ...