六：Vue的v-bind指令作用：绑定标签上的所有属性其简写 ":"

6.1：    例如：<p v-bind:id="test">Hello world</p>====><p :id="test">Hello world</p>

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <title>Document</title>

     <script src="https://vuejs.org/js/vue.min.js"></script>

     <style>

         .p-style1 {

             background-color: aquamarine;

             color: red;

         }

         .bolder {

             font-weight: bolder;

         }

         .p-style2 {

             background-color: rgb(, , );

             color: blue;

         }

         [v-cloak] {

             background-color: burlywood;

         }

     </style>

 </head>

 <body>
<div id="app">

        <p v-bind:id="'pTest'"></p>

        <p :id="idName"></p>

</div>

<script>

        var vm = new Vue({

            el: "#app",

            data: {

                idName: "dataP",

            }

        });

    </script>
</body>

</html>

　　说明：<p v-bind:id=" 'pTest' "></p>   //这个p标签的id号是pTest

<p :id="idName"></p>           //这个p标签的id号是dataP

在ie浏览器上显示如下图

6.2:Vue的v-bind指令在：class=""等号右边的双引号可以使用js表达式：showStyle是data中的变量p-style1是顶部的css中的样式

<div id="app">

  <p :class="showStyle?'p-style1':''">ppppppp</p>

</div>

    <script>

        var vm = new Vue({

            el: document.getElementById("app"),

            data: {

                showStyle: true

            }

        });

    </script>
</body>

</html>

　　在ie浏览器中显示如图所示

6.3Vue中的：class也可以向下面这个样子写

<div id="app">

  <p :class="{'p-style1':showStyle}">pppppppp</div>

    <script>

        var vm = new Vue({

            el: document.getElementById("app"),

            data: {

                showStyle: true

            }

        });

    </script>

在ie浏览器中显示效果如图和6.2显示效果是一个样的

七、Vue的v-model双向数据绑定

1）v-model可以处理 input、textArea、select、radio、checkBox、button：该属性只能用在表达那标签，或有value属性的标签上。

2）v-cloak  vue中自带的指令，作用是当加载完成后移除该指令属性，即我们希望任何在没有加载完成之前呈现的样式都可以同过v-cloak来渲染

3）v-once使用该指令，页面视图只渲染一次

7.1刚开始msg=Hello 通过v-model指令实现了双向数据绑定即msg=Hello world

     <div id="app" v-cloak>

         {{msg}}

         <input type="text" v-model="msg">

     </div>

 <script>

         var vm = new Vue({

             el: "#app",

             data: {

                 msg: "Hello"

             }

         });

     </script>

如图所示

        

7.2Vue实现range范围扩大和缩小

<div id="app" v-cloak>

        {{msg}}

         <br>

        <input type="text" v-model="range">

        <input type="range" v-model="range">

</div>

  <script>

        var vm = new Vue({

            el: "#app",

            data: {

                msg: "Hello",

                range:

            }

        });

    </script>

在ie浏览器中显示的效果如图所示

        

二、Vue基础语法的更多相关文章

  1. python 全栈开发，Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)

    一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...

  2. 2-5 vue基础语法

    一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...

  3. 一、vue基础语法（轻松入门vue）

    轻松入门vue系列 Vue基础语法 一.HelloWord 二.MVVM设计思想 三.指令 1. v-cloak 2. v-text 3. v-html 4. v-show 4. v-pre 5. v ...

  4. Vue基础语法-数据绑定、事件处理和扩展组件等知识详解（案例分析，简单易懂，附源码）

    前言: 本篇文章主要讲解了Vue实例对象的创建.常用内置指令的使用.自定义组件的创建.生命周期(钩子函数)等.以及个人的心得体会,汇集成本篇文章,作为自己对Vue基础知识入门级的总结与笔记. 其中介绍 ...

  5. Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例，vue基础语法

    一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...

  6. Vue（1）- es6的语法、vue的基本语法、vue应用示例，vue基础语法

    一.es6的语法 1.let与var的区别 ES6 新增了let命令,用来声明变量.它的用法类似于var(ES5),但是所声明的变量,只在let命令所在的代码块内有效.如下代码: { let a = ...

  7. 零基础学习JavaSE（二）——基础语法

    二.Java 基础语法 2.1 Java 基础语法 java是一个面向对象的程序语言,及可把一切事物当做对象处理,而java的事物中最小的就是class (类),类中有方法,类可以创建对象,并且有一些 ...

  8. 一、vue基础--语法

      用到的前台编程工具是Visual Studio Code,暂时是官网下载vue.js到本地使用 一.Visual Studio Code需要安装的插件: jshint :js代码规范检查 Beau ...

  9. Bootstrap定制(二)less基础语法

    前几日花了一天去看less,这几日在捣鼓其他东西,项目也在有序的进行中,今天花点时间整理下less的基础语法,也分享实际中的一些经验,与众人共享. 本篇笔者以less的基础语法着手,并配合bootst ...

  10. java(二、基础语法和基本数据类型)

    Java 基础语法 一个Java程序可以认为是一系列对象的集合,而这些对象通过调用彼此的方法来协同工作.下面简要介绍下类.对象.方法和实例变量的概念. 对象:对象是类的一个实例,有状态和行为.例如,一 ...

随机推荐

  1. Java并发基础01. 传统线程技术中创建线程的两种方式

    传统的线程技术中有两种创建线程的方式:一是继承Thread类,并重写run()方法:二是实现Runnable接口,覆盖接口中的run()方法,并把Runnable接口的实现扔给Thread.这两种方式 ...

  2. Mybatis中的# 与 $

    我们说MyBatis有两种注入参数的方式, - 一种是#{} - 另一种是${} 这两种从使用功能来看差距不大,那为什么会强推使用#? ${}使用的是拼接字符串,#{}使用的是占位符的方法,经过了处理 ...

  3. udev规则，部署Multipath

    部署Multipath多路径环境 配置iSCSI服务 编写udev规则 配置并访问NFS共享 部署Multipath多路径环境 1 配置iSCSI服务 1.1 问题 本案例要求先搭建好一台iSCSI服 ...

  4. 并发——深入分析CountDownLatch的实现原理

    一.前言   最近在研究java.util.concurrent包下的一些的常用类,之前写了AQS.ReentrantLock.ArrayBlockingQueue以及LinkedBlockingQu ...

  5. flask-redirect

    flask-redirect from flask import Flask, url_for, request, redirect app = Flask(__name__) @app.route( ...

  6. javascript入门 之 ztree（二 标准json数据）

    1.代码 <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - Standard Data </T ...

  7. [ddt02篇]十年测试老鸟帮您解析：ddt结合txt，excel，csv，mysql实现自动化测试数据驱动

    一.前言: 阅读此文之前请先阅读: [ddt01篇]十年测试老鸟帮您解析:ddt数据驱动入门基础应用:https://www.cnblogs.com/csmashang/p/12679448.html ...

  8. Python常见数据结构-Dictionary字典

    字典基本特点 字典的每个键值 key=>value 对用冒号 : 分割,每个键值对之间用逗号 , 分割,整个字典包括在花括号 {} 中. 键是唯一的,如果重复最后的一个键值对会替换前面的,值不需 ...

  9. lr自带协议工具

    Lr自带的协议分析的工具: 录制脚本之前,选对协议很关键,否则错误的协议会导致Virtual User Generator 录制不到脚本,或录制的脚本不完整,有些应用可能需要选择多个协议才能完整的记录 ...

  10. CentOS 7 yum安装 k8s 创建Pod一直处于ContainerCreating状态 问题解决

    问题描述 使用CentOS7的 yum 包管理器安装了 Kubernetes 集群,使用 kubectl 创建服务成功后,执行 kubectl get pods,发现AGE虽然在不断增加,但状态始终不 ...