v-if、v-else-if、v-else以及v-show

前提指令v-if、v-else-if、v-else

相似于JavaScript里的if、else-if、else，这三个指令依据表达式的值对DOM/组件举行衬着/烧毁。

值得注意的是，v-else-if必需跟在v-if以后，v-else必需跟在v-else-if或许v-if以后。

假如想一次性推断多个元素，能够将他们包裹在template以内，运用前提指令操纵外层的template，template并不会包含在终究的衬着效果中。

<div id="app">
  <template v-if="state">
    <p>文本A</p>
    <p>文本B</p>
    <p>文本C</p>
  </template>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app', // app是Vue实例的挂在对象
        data: {
            state: true
        }
    })
</script>

Vue在衬着元素时，出于效力斟酌，会尽能够的复用已有元素而非从新衬着。

<div id="app">
    <input type="text" v-if="state" placeholder="电话">
    <input type="text" v-else placeholder="邮箱">
    <button @click="toggle">切换</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app', // app是Vue实例的挂在对象
        data: {
            state: false
        },
        methods: {
          toggle () {
            this.state = !this.state
          }
        }
    })
</script>

点击“toggle”按钮，输入框内的placeholder转变，但当输入内容再举行切换后，内容照旧存在，申明<input>被复用了，只是修改了placeholder。

如果不愿望被复用，需要在指定的元素上增加key值，key值存在且唯一。

<div id="app">
    <input type="text" v-if="state" placeholder="电话" key="phone">
    <input type="text" v-else placeholder="邮箱" key="email">
    <button @click="toggle">切换</button>
</div>

v-show

口试考点：v-show和v-if完成的视觉效果完全一致，然则照样有本质区分的，v-show转变CSS display的值，v-if完全移除元素。

开辟技能：由于v-show是转变CSS属性，不管表达式真假与否，都会被编译。v-if直接操纵DOM的移除/衬着，所以v-if更合适不常常变化的场景，v-show合适频仍变化的场景。

列表轮回指令v-for

表达式需连系in运用，相似v-for=”item in items”

数组

<div id="app">
  <ul>
    <li v-for="(item, index) in items">{{index}}-{{item}}</li>
  </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app', // app是Vue实例的挂在对象
        data: {
          items: [
            '大盘鸡',
            '周黑鸭',
            '糖醋里脊',
          ]
        }
    })
</script>

用v-for将items中的数据轮回衬着，item相当于items元素的别号，同时还支撑index作为可选索引

对象

遍历对象属性时，有两个可选参数，分别为键名和索引

<div id="app">
  <ul>
    <li v-for="(value, key, index) in user">{{index}}-{{key}}:{{value}}</li>
  </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app', // app是Vue实例的挂在对象
        data: {
          user: {
            name: '一枚蛋Oops',
            age: 3,
            hobby: '美丽妹子'
          }
        }
    })
</script>

整数

<span v-for="n in 5">{{ n }}</span>

输出：12345

v-text和v-html

v-text

口试考点：v-text和{{}}功用一样，展现文本，然则v-text比{{}}好的处所是，当网速很慢或许javascript失足时，会暴露我们的{{xxx}}，而v-text不会显示出来。

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

v-html

口试考点：v-html和v-text区分在于v-text输出的是纯文本，浏览器不会对其再举行html剖析，但v-html会将其当html标签剖析后输出。

<span v-html="message"></span>
message: '<strong>Hello</strong> world',

Hello world
以上是本期全部内容，欲知后事怎样，请听下回分解<(￣︶￣)↗[GO!]