Vue 2.x – 插值语法/v-bind指令

Ne-21 • 2021-08-15 • 编程技术 • 378 阅读

插值语法

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
分享
二维码
海报
Vue 2.x – 插值语法/v-bind指令
插值语法 Mustache语法(双大括号语法) <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>……
<<上一篇
下一篇>>