Vue基础之内部指令(上)

LiteHeaven 2019-06-30

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。
Vue基础之内部指令(上)

要是不希望被复用,需要在指定的元素上添加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>

Vue基础之内部指令(上)

整数

<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!]

相关推荐

lyjava / 0评论 2020-07-30