Vue学习笔记（四、v-bind指令）

v-bind指令是将Vue对象中data变量的值与元素中内容绑定的指令，当元素前面添加“v-bind:”时，该元素内的文本会被作为表达式看待。

参考代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>VueBaseCode</title>
</head>

<style>
    [v-cloak]{
        display: none;
    }
</style>

<body>

    <div id="app">
        <p  v-cloak>{
   
   {msg}}++{
   
   {msg}}</p>
        <h4  v-text="msg"></h4>
        <input type="button" value="按钮01" title="mytitle">
        <input type="button" value="按钮02" v-bind:title="mytitle">
        <input type="button" value="按钮03" :title="mytitle+'简写'">
    </div>
    
    <script src="./lib/vue.js"></script>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Vue的基础代码学习',
                msg2:'<h1>这是一个大标题</h1>',
                mytitle:'这是一个自定义的title'
            }
        });
    </script>
</body>

</html>

对于

<input type="button" value="按钮01" title="mytitle">

这一行，“mytitle”实际上是作为字符串解析的，但是对于

<input type="button" value="按钮02" v-bind:title="mytitle">

这一行，在title前面添加了“v-bind:”，此时title的值“mytitle”是作为表达式解析的，mytitle被看作是Vue对象中data的一个变量。既然是一个表达式，当然也可以添加一些别的内容，比如mytitle+'简写'之类的，同时，"v-bind:"也可以简写为“:”，如下：

<input type="button" value="按钮03" :title="mytitle+'简写'">

Vue学习笔记（四、v-bind指令）

猜你喜欢