vue属性绑定

v-bind属性绑定指令，为元素动态绑定属性值

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <pre><a v-bind:href="url">菜鸟教程</a></pre>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            message: 'Runoob!',
            url:'http://www.runoob.com'
        }
    })
</script>
</body>
</html>

在vue提供的渲染模版中出了支持绑定简单的数据值外，还支持javascript表达式的运算

{{number+1}}
{{ok ? 'yes':'no'}}
{{message.split('').reverse().join('')}}
<div v-bind:id="'list-'+id"></div>

案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p>{{ number +1 }}</p>
    <p>{{ok? 'True':'False'}}</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            number: 4,
            ok: false
        }
    })
</script>
</body>
</html>

 

posted @ 2021-12-07 15:21  fat_girl_spring  阅读(38)  评论(0)    收藏  举报