Vue基本语法

Vue基本语法

v-bind：将title的值与message绑定

<span v-bind:title="message">
    鼠标悬浮
</span>


<script>
    let vm = new Vue({
        el:"#app",
        data:{
            message: "xxgbl",
        }
    });
</script>

v-if，v-else：实现条件判断

<div id="app">
    <h1 v-if="ok">yes</h1>
    <h1 v-else>no</h1>
</div>


<script>
    let vm = new Vue({
        el:"#app",
        data:{
            ok: false,
        }
    });
</script>

若ok的值为true，则输出yes，反之输出no。

v-for：实现循环

<div id="app">
  <h1 v-for="array in arrays">{{array.message}}</h1>

</div>


<script>
    let vm = new Vue({
        el:"#app",
        data:{
            arrays: [
                {message: "xxgbl"},
                {message: "gbl"},
            ]
        }
    });
</script>		

结果：

v-on：绑定事件

<div id="app">
  <button v-on:click="f">点我</button>
</div>




<script>
    let vm = new Vue({
        el:"#app",
        data:{

        },
        methods: {
            f: function(){
                alert("xxgbl");
            }
        }
    });
</script>

结果：

v-model：双向绑定

<p>文本框：
    <input type="text" v-model="message">{{message}}
</p>

<script>
    let vm = new Vue({
        el:"#app",
        data:{
            message: 123,
        },

    });
</script>

Vue基本语法

原文：https://www.cnblogs.com/xxgbl/p/14359492.html