- v-text

用于更新标签的内容 textContent

<p v-text="message + ' Girl!'"></p>

- v-html

跟v-text类似,都是修改内容,但v-html可以解析html标签,它等同于JS的innerHtml属性。

<p v-html="html"></p>
data: {
    message: 'Hello',
    html: '<b>Hello Bro!</b>'
}

- v-on

为元素绑定事件

<input type="button" value="v-on" @click="doIT">
<input type="button" value="简写v-on" v-on:click="doIT">
methods:{
    doIT:function(){
        alert('click触发');
    }
}

- v-show
隐藏或显示元素,true显示,false隐藏, 可以写表达式,控制display

<p v-show='noShow'>Hello!</p>
<p v-show='show'>Hello!</p>
<p v-show='2 > 1'>Hello!</p>

- v-if
跟v-show类似,但v-if操作的是dom,而v-show是样式

<p v-if='isShow'>Vue</p>

- v-for
跟据数据生成列表结构

  • {{ index + '===' + item }}
  • {{ index + '===' + item.name }}

- v-model

获取和设置表单元素的值(双向数据绑定)

<input type="text" name="" id="" v-model='message'>
<h2>{{ message }}</h2>

timg.jpg

最后编辑:2020年05月13日 ©著作权归作者所有

发表评论

正在加载 Emoji