当前位置：首页 > news >正文

微网站什么意思推广运营公司哪家好

news 2025/7/5 17:36:42

微网站什么意思,推广运营公司哪家好,做淘宝要网站,包头住房与城乡建设局网站目录 （一）初识指令和内容渲染指令v-html 1.v-html 案例： 官网的API文档 （二）条件渲染指令v-show和v-if 1. v-show 2. v-if （三）条件渲染指令v-else和v-else-if 案例 （四…

（一）初识指令和内容渲染指令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

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

2. v-if

作用：控制元素显示隐藏（条件渲染）
语法： v-if = "表达式" 表达式值 true 显示， false 隐藏
原理：基于条件判断，是否创建或移除元素节点
场景：要么显示，要么隐藏，不频繁切换的场景

示例代码：

<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

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

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

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 是被遍历的数组

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

作用：多次渲染整个元素（数组，数字，对象），基于数据循环
遍历数组语法：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>
注意：

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

key 的值必须具有唯一性

推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）

区别：加key-不加key

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

v-for 的默认行为会尝试原地修改元素（就地复用）

当不加key删除元素的时候，程序就会直接在前几个数据里修改，比如删除第一个，那么就会把第一个元素的文字删除了，但是其他的一些属性没有删除，然后把下面的文字提上来。

（七）双向绑定指令v-model

所谓双向绑定就是：

数据改变后，呈现的页面结果会更新

页面结果更新后，数据也会随之而变

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

作用： 给表单元素（input、radio、select）使用，双向绑定数据，可以快速获取或设置表单元素内容

语法：v-model="变量"

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

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

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

代码示例：

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

运行结果：