资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

Vue.js指令v-htmlv-cloakv-prev-once-创新互联

指令(Directives)是特殊的带有前缀v-的特性。指令的值限定为绑定表达式，指令的职责就是当其表达式的值改变时把某些特殊的行为应用到DOM上

成都网站建设哪家好，找创新互联公司！专注于网页设计、网站建设、微信开发、微信小程序、集团企业网站制作等服务项目。核心团队均拥有互联网行业多年经验，服务众多知名企业客户；涵盖的客户类型包括：不锈钢雕塑等众多领域，积累了大量丰富的经验，同时也获得了客户的一致赞誉！

HTML：


    Hello!

这里，v-if指令将根据表达式greeting值得真假  删除/插入p元素

JS：

var vm1=new Vue({
    el:'#test01',
    data:{
        greeting:false
    }
});

当greeting取值为false时，查看页面效果和控制台

Vue.js 指令 v-html v-cloak v-pre v-once

当greeting取值为true时，查看页面效果和控制台

Vue.js 指令 v-html v-cloak v-pre v-once这里需要注意的是，v-if="greeting"不能用于根元素之上，也就是说必须用于某一元素的子元素之上，否则，控制台就会报错"[Vue warn]: v-if="greeting" cannot be used on an instance root element."

查看错误示例：

HTML:

Hello!

JS:

var vm=new Vue({
    el:'p',
    data:{
        greeting:true
    }
});

控制台错误提示：

Vue.js 指令 v-html v-cloak v-pre v-once有些指令可以在其名称后面带一个”参数“(Argument)，中间放一个冒号隔开。例如：v-bind指令用于响应地更新HTML特性

HTML：

v-bind链接

这里href是参数，它告诉v-bind指令将元素的href特性跟表达式url的值绑定

JS：

var vm2=new Vue({
    el:'#test02',
    data:{
        url:'http://cn.vuejs.org/'
    }
});

v-on指令用于监听DOM事件

HTML:


    
`message`

    Reverse Message

JS:

var vm3=new Vue({
    el:'#test03',
    data:{
        message:'颠倒字体顺序'
    },
    methods:{
        reverseMessage:function(){
            //console.log(this)  this指代div#test03
            this.message=this.message.split('').reverse().join('')
        }
    }
});

v-model指令实现双向数据绑定

这个指令只能用在,