Vue.js

最新推荐文章于 2023-12-15 16:44:14 发布
最新推荐文章于 2023-12-15 16:44:14 发布
阅读量297 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Shirley_cxm/article/details/78323311
版权

1.双向绑定 v-model

实例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
    <input type="text" v-model="message"/>
</div>
</body>
<script  src="js/vue/vue.min .js"></script>
<script type="text/javascript">
    var exampleDate={
        message:'hello World!'
    }
    new Vue({
        el:"#app",
        data:exampleDate

    })
</script>
</html>

2.Vue.js的常用指令

v-if指令

实例： 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

</head>
<body>

<div id="app">
    <h1>hello,Vue,js!</h1>
    <h1 v-if="yes">Yes</h1>
    <h1 v-if="no">No!</h1>
    <h1 v-if="age>=20">Age:{{ age }}}</h1>
    <h1 v-if="name.indexOf('jack')>=0">Name:{{ name }}}</h1>
</div>
</body>

<script  src="js/vue/vue.min .js"></script>
<script type="text/javascript">
     var vm= new Vue({
        el:"#app",
        data:{
            yes:true,
            no:false,
            age:23,
            name:'hjdfd.jack',

        }
    })
</script>
</html>
这段代码使用了4个表达式：
数据的yes属性为true，所以"Yes!"会被输出；
数据的no属性为false，所以"No!"不会被输出；
运算式age >= 20返回true，所以"Age: 23"会被输出；
运算式name.indexOf('jack') >= 0返回false，所以"Name: hjdfd.jack"会被输出。
！注意：v-if指令是根据条件表达式的值来执行元素的插入或者删除行为。没有显示的值相当于被注释掉了<!-- -->

v-show指令
v-show也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性。

   
   


   
   
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

</head>
<body>

<div id="app">
    <h1>hello,Vue,js!</h1>
    <h1 v-show="yes">Yes</h1>
    <h1 v-show="no">No!</h1>
    <h1 v-show="age>=20">Age:{{ age }}}</h1>
    <h1 v-show="name.indexOf('jack')>=0">Name:{{ name }}}</h1>
</div>
</body>

<script  src="js/vue/vue.min .js"></script>
<script type="text/javascript">
     var vm= new Vue({
        el:"#app",
        data:{
            yes:true,
            no:false,
            age:23,
            name:'hjdfd.jack',
        }
    })
</script>
</html>
v-show指令如果没有显示相当于style="display: none;"
v-else指令

  
  

   
   可以用
   
   v-else
   
   指令为
   
   v-if
   
   或
   
   v-show
   
   添加一个“else块”。
   
   v-else
   
   元素必须立即跟在
   
   v-if
   
   或
   
   v-show
   
   元素的后面——否则它不能被识别。

  
  
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

</head>
<body>

<div id="app">
    <h1 v-if="age >= 22">Age: {{ age }}</h1>
    <h1 v-else>Name: {{ name }}</h1>
    <h1>---------------------分割线---------------------</h1>
    <h1 v-show="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
    <h1 v-else>Sex: {{ sex }}</h1>
</div>
</body>

<script  src="js/vue/vue.min .js"></script>
<script type="text/javascript">
     var vm= new Vue({
        el:"#app",
        data:{
            age:25,
            name:'hjdfd.jack',
            sex: 'Male'
        }
    })
</script>
</html>
v-else元素是否渲染在HTML中，取决于前面使用的是v-if还是v-show指令。
这段代码中v-if为true，后面的v-else不会渲染到HTML；v-show为tue，但是后面的v-else仍然渲染到HTML了。

v-for指令

v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似：

v-for="item in items"

items是一个数组，item是当前被遍历的数组元素。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

</head>
<body>

<div id="app">
    <table>
        <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Sex</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="person in people">
            <td>{{ person.name  }}</td>
            <td>{{ person.age  }}</td>
            <td>{{ person.sex  }}</td>
        </tr>
        </tbody>
    </table>
</div>
</body>

<script  src="js/vue/vue.min .js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            people: [{
                name: 'Jack',
                age: 20,
                sex: 'Male'
            }, {
                name: 'lisi',
                age: 23,
                sex: 'Male'
            }, {
                name: 'zhangsan',
                age: 25,
                sex: 'Female'
            }, {
                name: 'wangwu',
                age: 29,
                sex: 'Male'
            }]
        }
    })
</script>
</html>

v-bind指令

v-bind  主要用于属性绑定，Vue官方提供了一个简写方式 :bind，例如： 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

</head>
<body>
<div id="app">
    <a v-bind:href="wangzhi">wangzhi</a>
</div>
</body>
<script  src="js/vue/vue.min .js"></script>
<script type="text/javascript">

    var vm = new Vue({
        el: '#app',
        data: {
            wangzhi:'http://www.baidu.com'
        }
    })
</script>
</html>


Shirley_cxm
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue/element中分割线Divider的使用
weixin_45816407的博客
10-27 2万+
1. 单独的分割线 <div> <span>内容1</span> <el-divider></el-divider> <span>内容2</span> </div> 样式展示 2. 分割线带文字带位置带颜色 <div> <span>内容</span> <el-divider content-position="left"&g
Vue3分割线（Divider）
Mr Dear的博客
04-17 4193
区隔内容的分割线，并增加自定义线宽功能，功能丰富，简单易用😁😁
【VUE】如何画线
杨幂等
09-07 1万+
一、横线 <div class="line" /> /* 横线 */ .line{ float:right; width: 100%; height: 1px; margin-top: -0.5em; background:#d4c4c4; position: relative; text-align: center; } 二、竖线 <div ...
vue 分割线
weixin_60170500的博客
06-07 676
【代码】vue 分割线。
vue中分割线的实现
热门推荐
zzqz的博客
08-02 3万+
项目中，需要实现分割线的效果，如图： 奈何 element 中的分割线用起来报错，无奈只好自己写，很简单，先说下原理： 给一个高为1像素的盒子，盒子宽度根据要求设定，再设置盒子颜色，排列方式为相对定位，盒子里设置文字给左右padding，并进行绝对定位到中间即可实现 看代码： <div class="tableTitle"><span class="midText"&...
vue.js和vue.min.js
06-13
Vue.js和Vue.min.js是两种版本的同一款前端JavaScript框架——Vue.js的实现。Vue.js由尤雨溪（Evan You）开发，旨在为构建用户界面提供简洁、易用且可扩展的工具。这两个文件在功能上是相同的，但它们在实际应用中...
Vue.js devtools 6.5.1
最新发布
04-18
Vue.js devtools 是一款用于 Vue.js 应用程序开发的浏览器扩展工具，它可以帮助开发者更轻松地调试和分析 Vue.js 应用。这个扩展提供了诸如组件树、状态管理器、事件触发、性能分析等功能，使开发者可以更好地理解和...
vue.js 下载，引入vue.js 本地开发
05-18
Vue.js 是一款流行的轻量级前端JavaScript框架，它以其易学易用、组件化和高性能的特点深受开发者喜爱。本文将详细介绍如何下载Vue.js并进行本地开发。 首先，我们需要下载Vue.js。Vue.js的官方源码可以从其官方...
Vue.js前端 JavaScript 框架
03-15
Vue.js 是一款流行的前端 JavaScript 框架，它是一款轻量级、高性能的框架，用于构建交互式的用户界面和单页应用程序。Vue.js 的特点包括： 响应式数据绑定：Vue.js 实现了数据的双向绑定，当数据发生变化时，视图...
拖动两控件间的分隔线(vc6)
07-15
本代码用于实现两列表框控件或树形控件间的分隔线拖动，来改变左右两边控件的显示大小。经常用于实现windows资源管理器的界面。
Vue 三种带文字分割线实现方式
第二世界
10-22 6754
第一种 利用::before 和 ::after实现 <div class="not_has_more"> 常用品牌 </div> .not_has_more { margin: 40px 0; line-height: 50px; text-align: center; position: relative; height: 33px; font-size: 24px; font-family: .
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 3989
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
【vue3】拉动分割线切换左右两张图片
RainHg的博客
08-24 1184
需求：两张图片重叠，中间有一条线作为分界线，拉动线可以分别显示左右图片
vue+element ui 带字或者组件分割线
lazy_ting的博客
04-19 1万+
vue项目中需要用到带文字或者是按钮的分割线，并点击分割线进行另外组件的展示或者隐藏，研究了一下，记录一下 <template> <div class="hello"> <h1>{{ msg }}</h1> <div class="line-left-right"> <el-button size="mini" round...
Vue ElementUI table给表格一个斜线分隔线
Lella的博客
12-15 2018
缺点：当屏幕放大或者缩小的时候，斜线会变形，得使用@media screen根据屏幕大小一个个去调整，调得太麻烦了，就放弃了这种方式，感兴趣的可以试试。页面放大缩小斜线位置都不受影响。
Collapse 折叠面板
weixin_30641465的博客
03-16 1095
通过折叠面板收纳内容区域 基础用法 可同时展开多个面板，面板之间不影响 1 <el-collapse v-model="activeNames" @change="handleChange"> 2 <el-collapse-item title="一致性 Consistency" name="1"> 3 <div>与现实生活一...
element-ui, 分割线修改间距与虚线样式
ZzZsheng的博客
01-16 1万+
element-ui, 分割线修改间距与虚线样式 实际应用中，发现eleui的分割线间距有点大，且未提供虚线样式。又没有百度到相关文章，这里记录下结果： /* el-divider 修改高度&虚线效果 */ .el-divider--horizontal{ margin: 8px 0; background: 0 0; border-top: 1px das...
Vue.js与Velocity.js结合实现JavaScript过渡效果
"Vue.js JavaScript过渡 Velocity.js Vue.js应用开发 MVVM框架" Vue.js是一个流行的前端JavaScript框架，用于构建用户界面，特别适合构建单页应用程序。JavaScript过渡是Vue.js中的一个重要特性，它允许开发者通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值