Vue 2.x – 插值语法/v-bind指令
插值语法
Mustache语法(双大括号语法)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{message}}</div>
</div>
</body>
<script type="text/javascript" src="vue1026.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
message:'你好',
}
});
</script>
</html>
即使用{{属性名}}
来获取js中的数据
v-bind指令
v-bind
用于绑定数据和元素属性
例如:绑定a
标签的href
属性
<div class="app">
<a v-bind:href="url">click me</a>
<!-- 简写形式 -->
<a :href="url">click me2</a>
</div>
var app = new Vue({
el:'.app',
data:{
url:"https://www.baidu.com",
}
});
以上代码中,使用v-bind
绑定了a
标签的href
属性,当a
标签被点击时,会根据对应vue
中的对应的url
数据进行跳转到https://www.baidu.com
不光是
例如,绑定
href
属性可以被v-bind
指令绑定,任何属性都可以被绑定例如,绑定
src
属性、class
属性<div class="app">
<a v-bind:href="url" v-bind:class="klass">click me</a>
<img v-bind:src="imgsrc">
</div>
var app = new Vue({
el:'.app',
data:{
url:"https://www.baidu.com",
imgsrc:"https://cn.vuejs.org/images/logo.png",
kclass:"btn btn-default"
}
});
版权声明:
作者:Ne-21
链接:https://blog.gocos.cn/archives/93.html
来源:云淡风轻
文章版权归作者所有,未经允许请勿转载。
THE END
0
二维码
海报
Vue 2.x – 插值语法/v-bind指令
插值语法
Mustache语法(双大括号语法)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>……

共有 0 条评论