zoukankan      html  css  js  c++  java
  • vue【指令】

    <div class="m-conbox">
         <div v-text="html"></div>
         <div>{{html}}</div>
    </div>
    <script>
        export default {
            data(){
                return{
                    html:"我是html内容"
                }
            }
        }
    </script>

    v-text 和 {{}} 效果一样的,但最好用v-text,解决刷新问题

    添加html:v-html

    <div v-html="html"></div>
    <script>
        export default {
            data(){
                return{
                    html:"<h1>我是html内容</h1>"
                }
            }
        }
    </script>

    数据双向绑定:v-model【在input里面修改内容,p标签也会跟着改】

    <input type="text" v-model="html">
    <p>{{html}}</p>

    只使用一次:v-once【在input里面修改内容,p标签也会跟着改】

    绑定属性:v-bind:属性名称,带有bind的可以简写成:属性名称

    <img :src="imgs"/>
    
    data:
        imgs:“1.png”
    
    
    
    <div :disable="aa"></div>
    
    data:
         aa:"true"

    <div :class="bb></div>
    
    data:
         aa:"box

    .box{100px;height:100px;border:1px solid;}

    <a :href="c">我会跳转</a>
    
    data:
         aa:"a.html"

     

    循环遍历 v-for

    <ul>
        <li v-for="todo in todos">{{todo.text}}</li>
    </ul>
    
    <script>
        export default {
            data(){
                return{
                    todos:[
                        {text:"1"},
                        {text:"2"}
                    ]
                }
            }
        }
    </script>

    条件判断 v-if   v-else

    <p v-if = "arr.length ==0">暂无数据</p>
    <p v-else>{{arr}}</p>
    
    data:{
          arr:[1,2,3]  
    }

    绑定事件 v-on:事件名称,简写@事件名称 【v-on:click="show" 可以简写成 @click = "show"】

    事件:@click

       @keydown:键盘按下触发

       @keyup:键盘弹起触发

    当键盘按下左箭头时才触发事件k,弹出2

    <button @click ="show()">按钮</button>
    <input type="text" @keydown = "k()"/>
    
    data{
    
    },
    methods:{
       show:function(){
            alert(1)
        },
        k:function(e){
           var e = window.event || e;
           if(e.keyCode == 37){
              alert(2)
           }
       }    
    }

    阻止默认行为 prevent

    <a href="h.html"  @click.prevent = "show"></a>  ==>会阻止跳转到h.html

  • 相关阅读:
    IOC Unity的配置问题
    编译时常量与运行时常量
    Revit二次开发,将插件按钮(Ribbon)变灰或者隐藏
    C#类库读取App.config配置文件
    winform固定窗体大小
    Revit二次开发,获取模型版本信息
    JavaScript:文件保存自動下載函數:Save和SaveAs
    JavaScript:年月日時分秒設置
    JavaScript:字符串の空格刪減和字符刪減功能
    JavaScript:獲取數據の類型
  • 原文地址:https://www.cnblogs.com/dudu123/p/10059821.html
Copyright © 2011-2022 走看看