vue.js---zcc

@全糖去冰

已于 2023-04-19 10:06:49 修改

阅读量245

点赞数

文章标签： vue vue.js

于 2020-04-02 13:14:40 首次发布

本文链接：https://blog.csdn.net/qq_38345899/article/details/105165433

版权

vue.js

vue基础
vue时间格式化

vue基础

数据绑定

双括号数据绑定

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<template>
  <div>
    <!--{{}}数据绑定-->
    <p>{{msg}}</p>
    <!--{{}} 绑定表达式-->
    <p>{{4>3?true:false}}</p>
    <!-- 直接在{{}}输入值纯数字
        注意:输入字符串不显示并报错
    -->
    <p>{{111}}</p>
  </div>
</template>

<script>
    export default{
      name:'DataBind',
      data(){
        return{
          msg:'中华人名共和国'
        }
      }
    }
</script>

<style>
</style>

v-bind 绑定属性

Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind指令：

 <div>
     <!-- v-bind绑定属性-->
     <a v-bind:href="url">跳转到百度</a>
     <!-- v-bind 缩写形式绑定-->
     <p :title="msg">v-bind 缩写形式绑定s</p>
     <!-- 绑定动态属性-->
     <p :[attributeName]="title">绑定动态属性</p>
   </div>

但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。
在这里插入图片描述 这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

对于布尔 attribute (它们只要存在就意味着值为 true)，v-bind 工作起来略有不同，在这个例子中：

 <!-- 绑定布尔型的值-->
     <button :disabled="isdisabled">绑定布尔型的值</button>

注意:
如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled attribute 甚至不会被包含在渲染出来的元素中。

Class 与 Style 绑定

绑定Class

绑定单个class
通过属性绑定的方式,可以动态的更换掉指定元素的样式.

  <template>
  <div>
    <!-- 绑定单个class-->
    <div :class="classA">样式A</div>
  </div>
</template>

<script>
    export default{
      name:'DataBind',
      data(){
        return{
            classA:'current',

        }
      },
    }
</script>

<style>
</style>

绑定数组

 <!-- 绑定数组-->
    <div :class="[classA,classB]"></div>

 data(){
        return{
            classA:'current',
            classB:'focus'

        }

绑定对象
下面语法中的样式是否存在,取决于其样式值为true[存在]/false[不存在]

<template>
  <div>
    <!-- 绑定对象-->
    <div :class="object">绑定对象样式一</div>
    <div :class="{current:false,focus:true}">绑定对象样式二</div>
    <div :class="{current:isCurrent,focus:isFocus}"></div>
  </div>
</template>

<script>
    export default{
      name:'DataBind',
      data(){
        return{
            object:{
              current:true,
              focus:false
            },
            isCurrent:true,
            isFocus:false
        }
      },
    }
</script>

<style>
</style>

此外，v-bind:class 指令也可以与普通的 class 属性共存。当有如下模板：

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

和如下 data：

data: {
  isActive: true,
  hasError: false
}

结果渲染为：

<div class="static active"></div>

当 isActive 或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError 的值为 true，class 列表将变为 “static active text-danger”。

绑定style

可以直接绑定,对象实现绑定,数组实现绑定.

<div>
      <!-- 绑顶style(内联样式)-->
      <!-- 直接绑定-->
      <div :style="{color:'red',fontSize:'20px'}">绑定style</div>
      <!-- data中变量替换绑定-->
      <div :style="{color:color,fontSize:fs}">绑定style</div>
       <!--对象绑定-->
       <div :style="obj">对象绑定</div>
       <!-- 数组绑定-->
       <div :style="[baseStyle,overStyle]">数组绑定</div>
    </div>

data中的数据

			color:'green',
            fs:'30px',
            obj:{
              color:'pink',
              fontSize:'50px',
              background:'green'
            },
            baseStyle:{
              color:'pink'
            },
            overStyle:{
              fontSize:'40px'
            }

注意:
上面样式绑定中,具体样式名font-size需要写成fontSize

条件渲染

v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

<template>
  <div>
      <p v-if="true">v-if的值为true时显示</p>
      <p v-if="isShow">变量isShow为true是显示</p>
  </div>
</template>

<script>
    export default{
      name:'DataBind',
      data(){
        return{
          isShow:true
        }
      },
    }
</script>

<style>
</style>

也可以用 v-else 添加一个“else 块”：
即当v-if为true是,v-else为false

 <p v-if="false">v-if的值为true时显示</p>
 <p v-else>此时v-if为false</p>

在`<template>`元素上使用 `v-if` 条件渲染分组

因为v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个<template>元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-else

你可以使用 v-else 指令来表示 v-if 的“else 块”：

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

注意:
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

v-else-if

2.1.0 新增
v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

注意:
类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

用 key 管理可复用的元素

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换：

 <div>
        <div v-if="loginType=='username'">
          <label>username</label>
          <input type="text" name="username" placeholder="请输入用户名..." />
        </div>
        <div v-else>
          <label>email</label>
          <input type="email"  name="email" placeholder="请输入邮箱..."/>
        </div>
        <button @click="changeLoginType">切换到{{login}}登录方式</button>
      </div>

data数据块

 	data(){
        return{
          isShow:true,
          loginType:'username',
          login:'email'
        }
      },
      methods:{
        changeLoginType(){
          this.loginType=this.loginType==='username'?'email':'username'
           this.login=this.login==='email'?'username':'email'
        }
      }

这样也不总是符合实际需求，所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的key 属性即可：

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

现在，每次切换时，输入框都将被重新渲染。
注意，元素仍然会被高效地复用，因为它们没有添加 key 属性。

v-show

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：

<h1 v-show="ok">Hello!</h1>

注意:
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

v-if vs v-show

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-if 与 v-for 一起使用

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

vue时间格式化

methods{//   时间格式化
	dateFormat:function(time) {
		var date=new Date(time);
		var year=date.getFullYear();
		/* 在日期格式中，月份是从0开始的，因此要加0
		 * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
		 * */
		var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
		var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
		var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
		var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
		var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
		// 拼接
		return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
	},
}

@全糖去冰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js---zcc

vue.jsvue基础数据绑定双括号数据绑定v-bind 绑定属性Class 与 Style 绑定绑定Class绑定style条件渲染v-if在``````元素上使用 ```v-if ```条件渲染分组v-elsev-else-if用 key 管理可复用的元素v-showv-if vs v-showv-if 与 v-for 一起使用vue基础数据绑定双括号数据绑定数据绑定最常见的形式就是使...
复制链接

扫一扫