v-bind和v-model的本质区别和做用域
每篇一句
一场寂寞凭谁诉。算前言，总轻负。php
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>
相关文章
- 1. Servlet和JSP的本质和区别
- 2. 堆栈和队列 的本质区别
- 3. Unity种Awake()和Start()的本质区别
- 4. CEO 和 CTO 没有本质的区别
- 5. Opensource Circle: Docker和LXC的本质区别
- 6. wait（）和sleep（）方法的本质区别
- 7. surfaceView和View最本质的区别
- 8. Mybatis和Hibernate的本质区别
- 9. sizeof和strlen的本质区别
- 10. ArrayList和LinkedList的本质区别和使用效率
- 更多相关文章...
- • XSL-FO 区域 - XSL-FO 教程
- • Git 工作区、暂存区和版本库 - Git 教程
- • 适用于PHP初学者的学习线路和建议
- • Docker容器实战(八) - 漫谈 Kubernetes 的本质
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
