当前位置: 首页> 健康> 知识 > 平面图制作用什么软件_设计模板修饰演示文稿_友情链接交易_百度关键词优化多久上首页

平面图制作用什么软件_设计模板修饰演示文稿_友情链接交易_百度关键词优化多久上首页

时间:2025/7/9 11:40:00来源:https://blog.csdn.net/2301_76890677/article/details/144058162 浏览次数:0次
平面图制作用什么软件_设计模板修饰演示文稿_友情链接交易_百度关键词优化多久上首页

目录

(一)初识指令和内容渲染指令v-html

1.v-html

案例: 

官网的API文档 

(二)条件渲染指令v-show和v-if 

1. v-show

2. v-if

(三)条件渲染指令v-else和v-else-if

案例 

(四)事件绑定指令 v-on

 1.内联语句

 简写

2.事件处理函数

  3.给事件处理函数传参

(五)属性绑定指令v-bind

(六)列表渲染指令v-for

1.v-for中的key

区别:加key-不加key 

(七)双向绑定指令v-model


(一)初识指令和内容渲染指令v-html

Vue 会根据不同的 【指令】 ,针对标签实现不同的 【功能】
指令:带有 v- 前缀 的 特殊 标签属性

1.v-html

作用:设置元素的 innerHTML
语法:v-html = " 表达式 "

案例: 

<body>

    <div id="app">

        <div v-html="msg"></div>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

    <script>

        const app = new Vue({

            el: '#app',

            data: {

                msg: `

                    <a href="https://www.baidu.com">

                        baidu

                    </a>

                    `

            }

        })

    </script>

</body>

 

官网的API文档 

(二)条件渲染指令v-show和v-if 

1. v-show

  1. 作用: 控制元素显示隐藏
  2. 语法: v-show = "表达式" 表达式值 true 显示false 隐藏
  3. 原理: 切换 display:none 控制显示隐藏
  4. 场景: 频繁切换显示隐藏的场景

2. v-if

  1. 作用: 控制元素显示隐藏(条件渲染
  2. 语法: v-if = "表达式" 表达式值 true 显示false 隐藏
  3. 原理: 基于条件判断,是否 创建 移除 元素节点
  4. 场景: 要么显示,要么隐藏,不频繁切换的场景

示例代码:

<html>

    <head>

        <style>

            .box {

                border: 3px solid #000000;

                border-radius: 10px;

                padding: 20px;

                margin: 20px;

                width: 200px;

            }

        </style>

    </head>

    <body>

        <div id="app">

            <div v-show="flag" class="box">我是v-show控制的盒子</div>

            <div v-if="flag" class="box">我是v-if控制的盒子</div>

        </div>

   

        <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

   

        <script>

            const app = new Vue({

                el: '#app',

                data: {

                    flag:true,

                }

            })

        </script>

    </body>

</html>

演示截图:

当flag为true时:

当flag为false时:

1.v-show的底层原理:

切换css的diaplay: none来控制显示还是隐藏

2.v-if的底层原理:

根据判断条件来控制元素的创建和移除(当结果为true时当前元素就创建出来,为false时元素就销毁)

(三)条件渲染指令v-else和v-else-if

1. 作用: 辅助 v-if 进行判断 渲染
2. 语法: v-else v-else-if = "表达式"
3. 注意: 需要紧挨着 v-if 一起使用

案例 

 示例代码:

<html>

    <head>

        <title>

            案例

        </title>

    </head>

    <body>

        <div id="app">

            <p v-if="gender === 1">性别:♂ 男</p>

            <p v-else>性别:♀ 女</p>

            <hr>

            <p v-if="score >= 90">成绩评定A:奖励电脑一台</p>

            <p v-else-if="score >=70">成绩评定B:奖励周末郊游</p>

            <p v-else-if="score >=60">成绩评定C:奖励零食礼包</p>

            <p v-else>成绩评定D:惩罚一周不能玩手机</p>

        </div>

   

        <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

   

        <script>

            const app = new Vue({

                el: '#app',

                data: {

                    gender:1,

                    score:80

                }

            })

        </script>

    </body>

</html>

演示截图:

(四)事件绑定指令 v-on

作用:注册时间=添加时间+提供处理逻辑

语法:

  • <button v-on:事件名="内联语句">按钮</button>

  • <button v-on:事件名="处理函数">按钮</button>

  • <button v-on:事件名="处理函数(实参)">按钮</button>

  • v-on: 简写为 @

 1.内联语句

<body><div id="app"><button v-on:click="count--">-</button><span>{{count}}</span><button v-on:click="count++">+</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app=new Vue({el:'#app',data: {count:111}})</script></body>

页面实现:

事件名也不是非要写click,可以换成别的,比如mouseenter:

<body><div id="app"><button v-on:mouseenter="count--">-</button><span>{{count}}</span><button v-on:mouseenter="count++">+</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app=new Vue({el:'#app',data: {count:111}})</script></body>

将鼠标移到“-”和“+”按钮,不用点击,就可实现加减

 简写

将v-on:这一整块换成@,也就是换成@click,同样可以实现

2.事件处理函数

内联语句只适用逻辑简单的语句,当逻辑代码多了的时候,就需要更换了

语法:

v-on:事件名 = "methods中的函数名"

注意:

  • 事件处理函数应该写到一个跟data同级的配置项(methods)

  • methods中的函数内部的this都指向Vue实例

案例:

 在页面设置一个按钮,能够多次切换隐藏文字

<body><div id="app"><button @click="fun()">切换显示隐藏</button><h2 v-show="isShow">嘿嘿嘿</h2></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app=new Vue({el:'#app',data: {isShow:true},methods:{fun(){app.isShow = !app.isShow}}})</script></body>

运行结果:

把app换成this也是可以的,这样的可读性更高

  3.给事件处理函数传参

  • 如果不传递任何参数,则方法无需加小括号;methods方法中可以直接使用 e 当做事件对象

  • 如果传递了参数,则实参 $event 表示事件对象,固定用法。

语法格式:

@click="fn(参数1,参数2)"

案例:

设置一个box,提供几个按钮,模拟买果汁,设置不同的饮料不同的价格,将每个饮料的价格参数传到事件处理函数中,更改剩余的钱的余额

<head><title>v-on指令案例</title><style>.box {border: 3px solid #000000;border-radius: 10px;padding: 20px;margin: 20px;width: 200px;}h3 {margin: 10px 0 20px 0;}p {margin: 20px;}</style></head><body><div id="app"><div class="box"><h2>小蔡自动售货机</h2><button @click="buy(2)">可口可乐3元</button><button @click="buy(4)">橙汁4元</button><button @click="buy(5)">咖啡5元</button></div><p>银行卡余额:{{money}}元</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app=new Vue({el:'#app',data: {money:100000},methods:{buy(price){this.money-=price}}})</script></body>

运行效果;

(五)属性绑定指令v-bind

  1. 作用:动态设置html的标签属性 比如:src、url、title

  2. 语法v-bind:属性名=“表达式”

  3. v-bind:可以简写成 => :

 案例:

动态绑定图片和一段文字

<div id="app"><img v-bind:src="url" v-bind:title="msg" alt=""></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app=new Vue({el:'#app',data:{url:'./img/1.png',msg:'金木'}})</script>

运行结果:

简写

运行结果:

(六)列表渲染指令v-for

Vue 提供了 v-for 列表渲染指令,用来辅助开发者基于一个数组来循环渲染一个列表结构。

v-for 指令需要使用 (item, index) in arr 形式的特殊语法,其中:

  • item 是数组中的每一项

  • index 是每一项的索引,不需要可以省略

  • arr 是被遍历的数组

此语法也可以遍历对象和数

  1. 作用:多次渲染整个元素(数组,数字,对象),基于数据循环
  2. 遍历数组语法:v-for="(item,index) in 数组" ​​​​

 案例:

遍历一个数组并在页面上输出

<body><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><div id="app"><div v-for="(item,index) in list">{{item}} - {{index}}</div></div><script>const app=new Vue({el:'#app',data:{list:['菠萝','苹果','橘子','榴莲']}})</script></body>

运行结果:

在渲染的时候我们只用到了item,那么我们是否可以省略index呢?

可以

运行结果:

1.v-for中的key

语法: key="唯一值"

作用:给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用

为什么加key:Vue 的默认行为会尝试原地修改元素就地复用

 实例代码:

<ul><li v-for="(item, index) in booksList" :key="item.id"><span>{{ item.name }}</span><span>{{ item.author }}</span><button @click="del(item.id)">删除</button></li>
</ul>

注意:

  1. key 的值只能是字符串 或 数字类型

  2. key 的值必须具有唯一性

  3. 推荐使用 id 作为 key(唯一),不推荐使用 index 作为 key(会变化,不对应)

区别:加key-不加key 

key的作用:给元素添加唯一标识

v-for 的默认行为会尝试 原地修改元素 就地复用
       当不加key删除元素的时候,程序就会直接在前几个数据里修改,比如删除第一个,那么就会把第一个元素的文字删除了,但是其他的一些属性没有删除,然后把下面的文字提上来。

(七)双向绑定指令v-model

所谓双向绑定就是:

  1. 数据改变后,呈现的页面结果会更新

  2. 页面结果更新后,数据也会随之而变

可以快速获取或设置表单元素的内容

作用:表单元素(input、radio、select)使用,双向绑定数据,可以快速 获取设置 表单元素内容

语法:v-model="变量"

需求:使用双向绑定实现以下需求

  1. 点击登录按钮获取表单中的内容

  2. 点击重置按钮清空表单中的内容  

 代码示例:

<body><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><div id="app">用户名:<input type="text" v-model="username"> <br><br>密码:<input type="password" v-model="password"> <br><br><button @click="login">登录</button><button @click="reset">重置</button></div><script>const app=new Vue({el:'#app',data:{username:'',password:''},methods:{login(){console.log(this.username,this.password)},reset(){this.username='',this.password=''}}})</script></body>

运行结果:

点击重置

点击登录

关键字:平面图制作用什么软件_设计模板修饰演示文稿_友情链接交易_百度关键词优化多久上首页

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: