Vue 二内部指令

作者: 小眼睛的露鹿酱 | 来源:发表于2022-02-20 19:31 被阅读0次

Vue 二内部指令
Vue 内部指令
Vue内部指令
vue入门6---vue基本指令、自定义指令、插件
‘cnpm’不是内部指令，‘vue’不是内部指令
Vue 成长之旅 | Vue基础用法一
vue不是内部或外部指令--解决办法
web前端vue：vue内部指令大全说几个常用的
VUE 内部指令有哪些？？
Vue.js 内部指令

 <!DOCTYPE html>
 <html lang="en">
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>demo2</title>
         
     </head>
     <body>
         <div id="app">
             {{msg}}
            <button>alert</button>
            <div v-if="show">展示if</div>
            <div v-else>展示else</div>
            <div v-show="vshow">如果v-show的值为false</div>
         </div>
         <script  src="../vue.js"></script>
         <script>
             new Vue({
                 el:"#app",
                 data:{
                     msg:"hello word 123" ,  //不操作dom元素 直接修改script中的变量
                     show:true,
                     vshow:false
                 },
                 methods:{


                 }
            

             })
         </script>
     </body>
 </html>

v-if v-else

图片.png

v-show

图片.png

v-for

            <p v-for="(k,v) in arr">第{{k}}个 是 {{v}} </p>

script是

                     arr:["ele1","ele2","ele3"]

显示是：

图片.png

            <!-- 注意先是value 再是key  最后是inde -->
            <p v-for="(v,k,index) in obj">obj 中的key是{{k}}，v是{{v}}</p>

当对象都放到一个数组中呢

            <p v-for=" value in objs">数组objs中 name 是{{value.name}}，str1是{{value.str1}}</p>

script中

objs:[
                         {
                         name:"objName1",
                         str1:"str11",
                         str2:"str12"


                         },{
                        name:"objName2",
                         str1:"str21",
                         str2:"str22"

                         },{
                        name:"objName3",
                         str1:"str31",
                         str2:"str32"

                         }
                     ]

显示是

图片.png

v-on 绑定事件

<!-- v-on 跟一个函数 需要()-->
            <button v-on:click="add()">v-on点击按钮</button>
            <div>点击后的结果是{{count}}</div>

脚本中定义防范

//注意需要this.
methods:{
                     add(){
                         this.count++
                     }


                 }

图片.png

v-bind 绑定属性

<!-- v-bind是绑定属性   :其实是v-bind：简写的方式-->
           <div style="width: 100px; height: 74px;border: 1px solid #100" :style="bgColor"></div>

脚本中是

bgColor:{
                         backgroundColor:'red'
                     }

显示

图片.png

v-model

     <!-- v-model就是绑定数据 -->
            <input type="text" v-model="text">
            <button @click="showText()"> 点击打印text</button>

脚本中data添加

    text:'123'
               },
               methods:{
                   add(){
                       this.count++
                   },
                   showText(){

                      console.log(this.text)
                   }

显示的结果是

图片.png