VUE常用指令v-xxx

最新推荐文章于 2023-02-07 17:01:22 发布
最新推荐文章于 2023-02-07 17:01:22 发布
阅读量290 收藏
点赞数
分类专栏： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lql_h/article/details/102500097
版权

概述

在vue中提供一些对于页面+数据的更为方便的操作，这些操作就叫做指令。 譬如在HTML页面中这样使用`<div v-xxx=''></div>`

在vue中v-xxx就是vue的指令

指令就是以数据去驱动DOM行为的,简化DOM操作

常用指令

- v-text   不可解析html标签

- v-html    可解析html标签

- v-if    做元素的插入（append）和移除（remove）操作

- v-else-if

- v-else

- v-show   display:none 和display：block的切换

- v-for

  - 数组  item，index

  - 对象 value，key ，index

代码

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

    <div id="app"></div>

    <script type="text/javascript" src="vue.js"></script>

    <script type="text/javascript">

      

       new Vue({

           el:'#app',

           template:`

           <div>

                  <!--测试v-text-->

                  <div v-text='mytext'></div>

                  </hr>

                  <!--测试v-html-->

                  <div v-html='myhtml'></div>

                  <!--测试v-if  v-else-if  v-else-->

                  <button v-if='checkvif'>测试v-if2</button>

                  <button v-if='num==1'>测试v-if</button>                

                  <button v-else-if='num==2'>测试v-else-if</button>

                  <button v-else>测试v-else</button>



                 

                  <!--测试v-show-->

                  <div v-show='checkshow'>我是V-SHOW</div>

                  <!--循环数组-->

                  <ul>

                  <li v-for='(item,index) in arrayfor'>

                  {{ item }}-{{index}}

                  </li>

                  </ul>

                 

                  <!--循环数组-->

                  <ul>

                  <li v-for='item in arrayfor2'>

                  {{ item }}

                  </li>

                  </ul>



                  <!--循环对象-->

                  <ul>

                  <li v-for='(oj,key) in ojfor'>

                  {{key}}:{{oj}}

                  </li>

                  </ul>

           </div>

           `,

           data:function(){

              return {

                  mytext:'<h1>我这里是v-text</h1>',

                  myhtml:'<h1>我这里是v-html</h1>',

                  checkvif:true,

                  num:6,

                  checkshow:true,

                  arrayfor:['篮球','足球','乒乓球'],

                  arrayfor2:['篮球','足球','乒乓球'],

                  ojfor:{play:'篮球',people:'ming',age:'19'}

              }

           }

       })

    </script>

</body>

</html>

运行效果

lql_h
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Vue】v-xxx指令全面总结
丧心病狂Loli控的博客
04-13 555
文章目录v-text & v-htmlv-modelv-onv-forv-if & v-showv-bind v-text & v-html 在讲这两个指令之前，先说说我们很熟悉的 插值，再来说说用这两条指令替代插值的好处。 语法: {{插值表达式}} 说明： （1）这是使用Vue实例最简单的方式——花括号内部可以直接使用Vue实例的数据和方法 （2）不管是直接写个js语句，还是调用Vue实例，花括号内部必须有返回值 （3）当网速过慢，数据尚未加载成功时，页面时会显示最原始的花括
Vue中的基本指令操作v-xxx 指令
weixin_46554504的博客
07-27 147
Vue中的基本指令操作v-xxx 指令
【Vue】v- xxx 基础指令
懂得一千零一种,赋予你失败的方法！
03-22 756
文章目录v- xxx 基础指令1、v-text 文本指令2、v-html 标签指令3、v-on 事件指令实战：计数器补充4、v-show 图片指令5、v-if 条件指令6、v-bind 属性指令实战：图片切换7、v-for 循环指令8、v-model 表单指令实战：小蜗记事本 v- xxx 基础指令 1、v-text 文本指令 该指令用于设置标签的文本值（textContent） 默认写法会替换全部的内容，使用插值表达式 {{...}} 可以替换指定内容 支持内部写表达式 <!DOCTYP..
VUE xxx
万物皆字节
06-23 264
记录 新建文件夹 a、npm init -y b、npm install vue computed watch 组件 Vue.component()
Vue学习 - :xxx=“变量“
Java_Scholar0的博客
10-29 443
Vue一、:xxx="变量"问题描述二、分析三、总结 一、:xxx="变量"问题描述 以下拉框为例解释: <el-col :span="9"> <el-form-item label="状态:"> <el-select v-model="formInline.osiStatus" placeholder="请选择"> <el-option value="1" label="正常">正常</el-option>
vue 出现data-v-xxx的原因及解决
10-15
在Vue.js框架中，`data-v-xxx` 是一个特殊的属性，它的出现是由于Vue的CSS作用域限制策略。Vue通过添加这个唯一的标识来实现组件内部样式的隔离，避免样式冲突。当我们在Vue组件的 `<style>` 标签中使用 `scoped` ...
vue 获取元素额外生成的data-v-xxx操作
10-14
主要介绍了vue 获取元素额外生成的data-v-xxx操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue常用指令V-model用法
08-31
Vue.js 是一个流行的前端框架，它的核心特性之一是数据绑定，而`v-model`指令是实现数据双向绑定的关键。`v-model`指令使得视图（View）与模型（Model）之间的数据交互变得简单直观。在这篇文章中，我们将深入探讨...
浅谈vue 锚点指令v-anchor的使用
10-16
今天小编就为大家分享一篇浅谈vue 锚点指令v-anchor的使用，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3封装组件时 :xxx 这种写法是什么意思呢
weixin_35756130的博客
02-07 100
这种写法是一种 JavaScript 的语法，称为对象的解构赋值。它允许您从对象中提取值，并将它们分配给独立的变量。在这种情况下，xxx 是一个变量，它将被分配到对象中的一个值。 ...
Vue入门
xxxo3oxxx的博客
12-10 517
静态页面 最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务的到客户端单向流通。开发人员也只关心页面的样式和内容即可。 异步刷新，操作DOM 1995年，网景工程师Brendan Eich 花了10天时间设计了JavaScript语言. 随着JavaScript的诞生，我们可以操作页面的DOM元素及样式，页面有了一些动态的效果，但是依然是以静态为主。 aj...
vue指令介绍及详解
qq_45656036的博客
05-19 440
1.什么是指令 在vue中提供了⼀些对于页面 + 数据的更为方便的输出, 这些操作就叫做指令, 以v-xxx表示 例: 在vue中 以v-xxx开头的就叫做指令 指令中封装了⼀些DOM⾏为, 结合属性作为⼀个暗号, 暗号有对应的值,根据不同的值，框架会进⾏相关DOM操作的绑定 vue中常⽤的v-指令演示 v-text: v-html: 元素的innerHTML v-if : 判断是否插⼊这个元素,相当于对元素的销毁和创建 v-else-if v-else v-show 隐藏元素 如果确定要隐藏, 会给元素
全网 Vue 最XXXXXXX...... 男人看了沉默，女人看了流泪
热门推荐
03-11 6万+
xxxx全网 Vue 最XXXXXXX...... 男人看了沉默，女人看了流泪 <dir id="app"> <ul> <li v-for="(book, index) in books">{{index + 1}} - {{book}}&l...
Vue基础 - Vue语法
吾昂王
12-08 953
模板语法 Vue模板语法有两大类 1、插值语法 功能：用于解析标签体内容 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性 2、指令语法 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…） 举例：v-bind:href='xxx'或简写为:href='xxx'，xxx同样要写js表达式，且可以直接读取到data中的所有属性 备注：Vue中有很多的指令，且形式都是：v-???，此处我们只是拿v-bind举个例子 3、示例 <!DOCTYPE html> &l
vue基础用法&基础原理整理
hangao233的博客
04-06 6万+
vue基础用法&基础原理整理 1. vue基础知识和原理 1.1 初识Vue 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象 demo容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法 demo容器里的代码被称为【Vue模板】 Vue实例和容器是一一对应的 真实开发中只有一个Vue实例，并且会配合着组件一起使用 {{xxx}}是Vue的语法：插值表达式，{{xxx}}可以读取到data中的所有属性 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新
vue data-v-xxx
pobu168的博客
03-31 2万+
现象：在Vue开发中，会遇到html被浏览器解析后，在标签中出现’data-v-xxxxx’标记，如下：<div data-v-fcba8876 class="xxx"> aaa</div>原因：来看官方解释：<style scoped> @media (min-width: 250px) { .list-container:hover { background: orang
vue中常用的v-指令
weixin_42595284的博客
10-08 1413
vue中常用的v-指令演示 常用指令 v-text 设置双标签元素的innerText v-html 设置双标签元素的innerHTML v-if 插入或者移除元素(true,插入,false移除) v-else 保证上方兄弟节点存在v-if || v-else-if v-if v-else 只会有其一存在 v-show 隐藏或者显示元素 v-model 双向数据绑定 元素必须有valu...
Vue.js入门
xx_xxxxxxxxxx1120的博客
08-15 239
一、写一个简单的Vue实例 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Vue入门e&lt;/title&gt; &lt;script src="js/vue.js"
Vue中 V指令
weixin_44813102的博客
07-23 640
v-if 条件渲染 v-show v-else (必须在v-if/v-else-if/v-show指令后) v-else-if (v-if/v-else-if后) v-for (遍历) v-html (绑定HTML属性中的值) (本篇先讲这6个) v-bind (响应更新HTML特性，绑定自定义属性，如绑定某个class元素或style) v-on (监听指定元素的dom事件) v-model...
vue3元素v-xxx
最新发布
07-25
Vue 3 中的元素指令是通过以 "v-" 开头的特殊属性来实现的。这些指令被用于在 HTML 元素上添加动态行为和数据绑定。 以下是一些常见的 Vue 3 元素指令： 1. v-bind: 绑定属性 例如：`<img v-bind:src="imageSrc">`，这会将 `imageSrc` 变量的值绑定到 `src` 属性上，实现动态的图片路径。 2. v-if 和 v-else: 条件渲染 例如：`<div v-if="show">显示内容</div>`，根据 `show` 变量的值来决定是否渲染该元素。 3. v-for: 列表渲染 例如：`<li v-for="item in items" :key="item.id">{{ item.name }}</li>`，将数组 `items` 的每个元素渲染为一个 `<li>` 元素。 4. v-on: 事件监听 例如：`<button v-on:click="handleClick">点击我</button>`，当按钮被点击时触发 `handleClick` 方法。 5. v-model: 双向数据绑定 例如：`<input v-model="message">`，将输入框的值与 `message` 变量进行双向绑定。 这只是一些常见的元素指令，Vue 3 还提供了其他更多的指令和功能来满足不同的需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值