前端技术-vue指令_前端指令什么时候可以只写冒号-CSDN博客

本文链接：https://blog.csdn.net/weixin_45571513/article/details/118583479

单向绑定指令 v-bind ，它的简写的形式就是一个冒号（:）

<!-- 如果要将模型数据绑定在html属性中，则使用 v-bind 指令
     此时title中显示的是模型数据
-->
<h1 v-bind:title="message">
    {{content}}
</h1>

<!-- v-bind 指令的简写形式： 冒号（:） -->
<h1 :title="message">
    {{content}}
</h1>

双向数据绑定指令v-model

<!-- v-bind:value只能进行单向的数据渲染 -->
<input type="text" v-bind:value="searchMap.keyWord">
<!-- v-model 可以进行双向的数据绑定  -->
<input type="text" v-model="searchMap.keyWord">

<p>您要查询的是：{{searchMap.keyWord}}</p>

vue绑定事件--@click="方法名"

<button @click="search">查询</button>

条件渲染-- v-if / v-else

<body>
    <div id="app">
      <!-- 勾选则页面显示Hello，不勾选则页面显示Hi-->
      <input type="checkbox" v-model="ok"/>是否同意
      <h2 v-if="ok">Hello</h2>
      <h3 v-else>Hi</h3>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                ok:false
            }
        })
    </script>
</body>

循环指令 v-for

<body>
    <div id="app">
         <ul>
             <li v-for="n in 5">{{n}}</li>
         </ul>

         <ol>
             <li v-for="(n,index) in 5">{{n}} -- {{index}}</li>
         </ol>

         <table border="1">
            <tr v-for="user in userList">
                <td>{{user.id}}</td>
                <td>{{user.username}}</td>
                <td>{{user.age}}</td>
            </tr>
         </table>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                userList: [
                    { id: 1, username: 'helen', age: 18 },
                    { id: 2, username: 'peter', age: 28 },
                    { id: 3, username: 'andy', age: 38 }
                ]
            }
        })
    </script>
</body>