Vuejs-学习记录（二）属性和计算属性

属性(或指令)

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++