属性(或指令)
v-show
根据条件的 boolean
值来切换元素的 CSS display
属性。
相对 v-if
来说
v-show
只是针对 display
属性,即该元素会始终被渲染,只是不一定会显示出来。
而 v-if
不同,它会根据条件决定是否会被创建-渲染或者销毁
v-html
官方说是只能按照普通 html
内容去插入,不会作为模版来编译。如果需要用v-html
结合模版来使用,最好通过自定义组件形式来实现。
v-text
更新元素的 textContent
属性, 这种更新属于更新标签的整个文本内容。如果要局部更新需要用到插值
其实就是元素的文本节点内容。
v-once
数据只会在加载时更新,后面不会随数据变化而变化
用法:
<div id="example"><h1 v-once>{
{a}}</h1></div>
对标签使用了 v-once
之后,在控制台改变 vm.a
的值,会发现 DOM 中显示的还是 vm.a
的初始值
v-model="attr"
数据模型,即双向绑定,和 v-bind
单向绑定不同,它不仅可以读取值还可以通过输入来修改属性值。
v-bind="value"
或 v-bind:attr="value"
或 :attr="value"
单向绑定,一般可以绑定标签的一个内置属性(比如:title,鼠标放上去会出现被绑定的值,即双引号中的 value),不能直接修改绑定的属性值。
v-on:eventHandler
为元素绑定事件,比如 v-on:click="clickHandler"
,为元素绑定了个点击事件,事件处理函数为:clickHandler
v-if
条件属性,通过判断条件值来决定是否显示标签。
示例:点击按钮显示隐藏 div
tags:
// tags
<h1>条件属性:v-if</h1>
<button v-on:click="toggle">Show Message ?</button>
<p v-if="isToggle">I am showed !</p>
datas:
var data = {
isToggle: false,
};
methods:
// 方法
methods: {
toggle: function () {
this.isToggle = !this.isToggle;
},
}
通过点击按钮,调用 toggle
改变 isToggle
的值,然后 p
标签内使用 v-if
属性绑定 isToggle
属性。
v-else
和 v-else-if
和 if ... else ...
条件语句一样,承接 v-if
之后的 v-else
;
即:v-if
不满足然后执行 v-else
如:(如果 num 大于 10 就显示红色背景div,否则显示蓝色背景div)
<h1>条件属性:v-if</h1>
<button v-on:click="toggle">Show Message ?</button>
<p v-if="isToggle">I am showed !</p><br/><br/>
<button v-on:click="changeBgNum">点我 {
{
bgNum}}</button><br/><br/>
<span v-if="bgNum === 1" style="background-color:red;color:white;">我是红色</span>
<span v-else-if="bgNum === 2" style="background-color:green;color:white;">我是绿色</span>
<span v-else style="background-color:blue;color:white;">我是蓝色</span><br/><br/>
数据:
var data = {
bgNum: 1,
}
方法:
// 方法
methods: {
changeBgNum: function () {
if ( this.bgNum++