Vue.js基本指令

朴灿烈づ我的快乐病毒、 2024-03-25 09:44 70阅读 0赞

**目录**

插值表达式“\{ \{\}\}”

v-html和v-text指令

例1

v-on指令

例1

v-model指令

例1

v-if指令

例1：判断二月份有几天

例2：比较两个数的大小

v-show指令

v-if和v-show的区别

v-for 指令

遍历数组

遍历对象

--------------------

### 插值表达式“\{ \{\}\}” ###

数据绑定最常见的形式就是使用双大括号（Mustache语法）“\{ \{\}\}”将动态绑定的数据实时显示出来

<div id="app">
        {
       {msg}}<br>
        {
       {5+5}}<br>
        {
       { ok ? 'YES' : 'NO' }}<br>
        {
       { msg.split('').reverse().join(',') }}
    </div>
        
    <script>
    new Vue({
      el: '#app',
      data: {
        ok: true,
        msg: 'asdfSF',
      }
    })
    </script>

![e8bde53f9312472db604446cd6e72f49.png][]

### v-html和v-text指令 ###

v-html指令用于输出html代码

v-text指令主要用来更新textContent,将示例中的数据当作纯文本输出

#### 例1 ####

<div id="app">
        <div v-html="msg"></div>
        <div v-text="msg"></div>
    </div>
        
    <script>
    new Vue({
      el: '#app',
      data: {
        msg: '<h1>Vue教程</h1>'
      }
    })
    </script>

![a2ee419cd9cf48499fc073fd35ad909d.png][]

### v-on指令 ###

v-on指令是用来绑定事件监听器的。类似于原生的JavaScript中的onclick的用法，使用此指令可以进行一些交互。" v-on: "可以简写为“ @ ”

#### 例1 ####

<div id="app">
            <input type="button" value="点击次数" @click="add"/>
            <p>我被按了 {
       {count}} 次</p>
        </div>
        <script>
            new Vue({
                el:"#app",
                data:{
                    count:0
                },
                methods:{
                    add(){
                        this.count++
                    }
                }
            })
        </script>

![0b81dfa14bd347a6841d1c97ee94805c.png][]

### v-model指令 ###

v-model指令的本质是监听用户输入事件，从而更新数据。同时，v-model指令会忽视所有表单元素的value、checked、selected特性的初始值，他会将Vue实例中的数据作为数据来源。当输入事件发生时，他会实时更新Vue示例中的数据，从而实现数据的双向绑定。

#### 例1 ####

<div id="app">
            <p>input元素：</p>
            
            <input v-model="message" placeholder="请输入...">
            <p>消息是：{
       {message}}</p>
        </div>
        <script>
            new Vue({
                el:'#app',
                data:{
                    message:'hello',
                }
            })
        </script>

![ffefa696ba8c4b7baabdd90ef3dc175b.png][]

### v-if指令 ###

v-if指令可以实现条件渲染，Vue会根据表达式的值的真假来渲染元素

#### 例1：判断二月份有几天 ####

<div id="app">
            <input type="text" v-model="year">
            <p v-if="year%4==0 ||year%100==0">{
       {show(29)}}</p>
            <p v-else>{
       {show(28)}}</p>
        </div>
        <script>
            new Vue({
                el:"#app",
                data:{
                    year:2023,
                },
                methods:{
                    show(num){
                        return this.year+"年2月份有"+num+"天"
                    }
                }
            })
        </script>

![595c63793f94458d80a2282452923a24.png][]

#### 例2：比较两个数的大小 ####

<div id="app">
            请输入第一个数：<input type="text" v-model="num1">
            <br>
            请输入第二个数：<input type="text" v-model="num2">
            <br>
            <p v-if="!this.num1||!this.num2">比较结果：{
       {show("请输入正确数字")}}</p>
            <p v-else-if="num1>num2">比较结果：{
       {show("第一个数大于第二个数")}}</p>
            <p v-else-if="num1<num2">比较结果：{
       {show("第一个数小于第二个数")}}</p>
            <p v-else="num1==num2">比较结果：{
       {show("第一个数等于第二个数")}}</p>
        </div>
        <script>
            new Vue({
                el:'#app',
                data:{
                    num1:'',
                    num2:'',
                    result:''
                },
                methods:{
                    show(da){
                        return  da
                    },
                }
            })
        </script>

![9b18e965fccf4fcc95acf956cbbd5ed3.png][]

### v-show指令 ###

v-show指令和v-if指令作用还差不多,以下面的例子来区分一下

例1

<div id="app">
            <div v-if="isTrue">v-if</div>
            <div v-show="isTrue">v-show</div>
        </div>
        <script>
            new Vue({
                el:"#app",
                data:{
                    
                },
                computed:{
                    isTrue(){
                        return false;
                    }
                }
            })
        </script>

![c795a24403774eb4bb3cb253e6d30c8d.png][]

#### v-if和v-show的区别 ####

v-if没有显示是因为对页面进行注释

v-show没有显示是因为CSS中的display的值为none

v-if的原理：每次动态创建或移除元素，来实现元素的显示或隐藏

v-show的原理：动态为元素添加或移除display:none样式，来实现元素的显示和隐藏

如果要频繁的切换元素的显示状态，用v-show性能更好

### v-for 指令 ###

v-for用来遍历数组、对象的，其表达式需要结合in来使用

#### 遍历数组 ####

<div id="app">
            <ul>
                <li v-for="cloth in clothes">{
       {cloth.name}}:${
       {cloth.price}}</li>
            </ul>
        </div>
        <script>
            new Vue({
                el:'#app',
                data:{
                    clothes:[
                        {
                            name:'衬衫',
                            price:'180'
                        },
                       {
                            name:'外套',
                            price:'200'
                       },
                       {
                            name:'裤子',
                            price:'380'
                       }
                    ]
                }
            })
        </script>

![758f90050c5a4833ab0d4ca081c5980a.png][]

#### 遍历对象 ####

<div id="app">
            <ul>
                <li v-for="(value,key,index) in user">{
       {index}}-{
       {key}}:{
       {value}}</li>
            </ul>
        </div>
        <script>
            new Vue({
                el:"#app",
                data:{
                    user:{
                        name:"张三",
                        age:"30",
                        sex:"男"
                    }
                }
            })
        </script>

![a4fbabb377a5447197bf5020d6ddac51.png][]

[e8bde53f9312472db604446cd6e72f49.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/2ce108f75e1341d98359b8c85a277345.png
[a2ee419cd9cf48499fc073fd35ad909d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/c98cded6674a45699f50b62faca8ae5f.png
[0b81dfa14bd347a6841d1c97ee94805c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/e8fc5984cd0548d79dce67ef9526ac58.png
[ffefa696ba8c4b7baabdd90ef3dc175b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/93c0730cb48349a29d606170ea4ecf9a.png
[595c63793f94458d80a2282452923a24.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/8aaa5a00c310469b94874cb7abfacba0.png
[9b18e965fccf4fcc95acf956cbbd5ed3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/a55c6f51d77b4de791cf9d1d0417ff3e.png
[c795a24403774eb4bb3cb253e6d30c8d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/e226f97aa0464b4a8a8f0893df44847c.png
[758f90050c5a4833ab0d4ca081c5980a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/0911f179fe9a4f3882ddad7bb9a34328.png
[a4fbabb377a5447197bf5020d6ddac51.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/0ee3ca531458420a9fcec908d788c4f6.png