vue的特殊指令 v-if v-once v-bind v-for v-on v-model

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>特殊指令</title>

     <script src="vue.js"></script>

 </head>

 <body>

     <div id="app">

         <!-- v-once 只能渲染一次。const -->

         <!-- v-bind----vue提供的特殊指令：表示将这个元素的节点title特性和vue实例的aaa属性保持一致 -->

         <span v-bind:title="aaa">

             鼠标悬停几秒钟查看此处动态绑定的提示信息！

         </span>

         <!-- v-if控制切换一个元素是否显示 -->

         <p v-if='seen'>现在你看到我了</p>

         <!-- 特殊指令v-for='todo in 循环数组的名称'      绑定数组的数据来渲染一个列表 -->

         <ol>

             <li v-for='todo in todos'>

                 {{todo.text}}

             </li>

         </ol>

         <!-- v-on添加事件监听器  -->

         <p>{{content}}</p>

         <button v-on:click="reverseContent">反转内容</button><!-- 当点击按钮时触发reverseContent函数 -->

         <!-- v-model  实现表单输入和应用状态之间的双向绑定 -->

         <p>{{main}}</p>

         <input type="text" v-model="main">

     </div>

     <script>

             // vue基础操作语法，特殊指令介绍

             var app = new Vue({

                 el: '#app',

                 data: {

                     // v-bind

                     aaa: '页面加载于'+new Date().toString(),

                     // 控制台输出app.message=""  app.name=""  app.aaa=""  ,页面会响应式变化

                     // v-if

                     seen: true,

                     //控制台输出app.seen=false  p元素在页面中就看不到了  记住此处不能加引号

                     // v-for

                     todos: [

                         {text: '学习js'},

                         {text: '学习vue'},

                         {text: '好事'}

                     ],

                     //在控制台输入app.todos.push({text:'新li'})，就可以在页面列表中添加一条新项

                     // v-on绑定事件

                     content: '我爱学习',

                     // v-model表单和p标签内容双向绑定

                     main: '请输入内容'

                 },

                 methods:{

                     reverseContent:function() {

                         this.content = this.content.split('').reverse().join('')

                     }

                 }

             });

         </script>

 </body>

 </html>
巴特西

vue的特殊指令 v-if v-once v-bind v-for v-on v-model

最新文章

热门文章
