案例介绍

字符串反转

首先，我们改造一下上一篇的代码

Vue.createApp({
    data(){
        return {
            content: 'hello world'
        }
    },
    methods: {
        handleBtnClick(){
            alert('点击了')
        }
    },
    template: `
        <div>
            {{content}}
            <button v-on:click="handleBtnClick">反转字符串</button>    
        </div>
    `
}).mount('#root');
复制代码

• ``：es6中的模板字符串，由于在vue中template下面只有一个根标签，所以在写的时候需要注意，要把所有元素放到一个div根标签里面。

• methods：vue里面的一个对象，主要用于定义DOM中的各种事件所触发的方法

• v-on：vue中的事件绑定方式

• v-on:click：绑定一个click事件

此时已经给button绑定了一个点击事件，且已经执行成功了，那么就可以开始做字符串反转的操作了！

• 在上一篇案例中，我们知道vue是面向数据编程的，可以直接通过改变数据从而改变DOM上渲染的效果

• 那么我们是不是可以直接在handleBtnClick方法中改变一下content的值呢？

this.content = 'dlrow olleh'

但是如果这样的话，就只是单纯的改变字符方向而已，并不是我们想要的效果了，我们需要做一个点击按钮之后可以反转，再点击一下之后又可以还原的效果。

这时候我们就要用js去写效果了！

this.content = this.content.split('').reverse().join('')
复制代码

• 获取到content之后，将content里面的字符拆解成数组，然后反转，再将数组转为字符串，并重新赋值给content

小结

通过这个例子，可以对v-on指令有了一个初始的认识，并对vue中的事件操作有了一定的理解。

内容隐藏

首先，我们还是要改造一下代码

Vue.createApp({
    data(){
        return {
            show: true
        }
    },
    methods: {
        handleBtnClick(){
            alert('点击一下')
        }
    },
    template: `
        <div>
            <span v-if="show">hello world</span>
            <button v-on:click="handleBtnClick">显示/隐藏</button>
        </div>
    `
}).mount('#root');
复制代码

• 在data中定义了一个show:true

• 在div中添加了一个span标签，标签上新增了一个v-if指令

• v-if：vue中用来判断的指令，在例子中通过show来判断span标签是否存在

在页面中可以看到span标签是显示的，此时我们在handleBtnClick方法中修改一下show的值

this.show = false

• 这时候会在浏览器Elements中看到一个v-if标签，这是vue底层逻辑中对v-if指令做的操作，在后面的章节中会仔细讲解vue的底层逻辑。

当我们看到span标签隐藏之后，在点击按钮时，并没有重新显示出来，这也不是我们想要的效果，所以此时需要对handleBtnClick方法里面的内容进行改造一下啦~

this.show = !this.show
复制代码

• 对show的内容取反，点击一次就执行一次取反操作，这样就可以渲染出显示/隐藏的效果啦

小结

通过这个例子，可以对v-if指令有了一个初始的认识，并对vue中的判断方式有了一定的理解。

总结

通过上面的两个例子，我们学习到了v-on和v-if两个vue里面常用的指令，也大致了解了这两个指令的用法，在后面的文章中，或者在你未来的项目实践中，都会经常用到这两个指令，可以多练习几遍例子，加深这两个指令的印象！