欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue中的关键字

程序员文章站 2022-05-18 20:41:10
...

1. v-model

    是将标签的value值与vue实例中data属性进行绑定

请输入您的专业:<input type="text" v-model="major"/>


new Vue({
    el:'#app',
    data:{
        major:'java'
    }

})

2. v-on

    通过配合具体的事件名,来绑定vue中定义的函数

请输入您的专业:<input type="text" v-on="changeMajor"/>


new Vue({
    el:'#app',
    data:{
        major:'java'
    },
    methods:{
        changeMajor:function(){

        console.log("change Title")

}
    
    }

})

3.v-bind

      我们知道差值表达式是不能写在html的标签的属性内的,那如果一定要用vue中的属性作为html标签的属性的内容,就可以通过v-bind进行属性绑定。

new Vue({

    data:{
        link:'http://www.baidu.com'
    }

});

<a v-bind:href="link"> 百度 </a>

 4.v-once

       此时该标签中的插值表达式,只获取一次数据。之后数据的变化不影响此差值表达式的值。

5. v-hmtl 和 v-text

v-html会将vue中的属性值作为html的元素来使用

v-text会将vue中的属性的值只作为纯文本来使用

<span v-html="mylink"></span>

<span v-text="mylink"></span>


new Vue({

    el:'#app',
    data:{
        link:'http://baidu.com',
        mylink:'<a href="http://www.baidu.com">百度</a>'

        }

    })

 

相关标签: 【VUE】