六：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. js生成一个指定范围内的随机整数

    function __random(start=0, end=1) { return Math.floor(Math.random() * (end - start + 1) + start); } ...

  2. VUE CLI3.0安装及配置

    # 安装 npm install -g @vue/cli # 查看已安装版本vue --version 或者 vue -V # 卸载 npm uninstall @vue/cli -g # 新建项目 ...

  3. Golang入门（1）：安装与配置环境变量的意义

    摘要 在几年前学习Java的时候,环境的配置就会劝退一部分的初学者.而对于Golang来说,也需要从环境的配置开始学起.这一篇文章将从如何安装Golang开始讲起,随后将会提到Golang中的环境变量 ...

  4. 【C++】VS2017 不能将const char * 分配给 char *

    我的方式是把结构体中定义的 char * 换成string #include <iostream> #include<string> using namespace std; ...

  5. Scratch 全套学习资料

    链接:https://pan.baidu.com/s/1qX0T2B_zczcLaCCpiRrsnA提取码:xfp8

  6. MTK Android Android数据保存到系统数据库

    如果有留意Android中系统设置Settings里面的源码,你会发现代码中频繁用到了Settings.System操作,该类通过键值对的形式,将一些特定的值以全局的模式保存到Setting的数据库中 ...

  7. python3（六） for while

    # Python的循环有两种,一种是for...in循环,依次把list或tuple中的每个元素迭代出来 names = ['Michael', 'Bob', 'Tracy'] for name in ...

  8. Flex Socket与Java通信实例说明（转）

    Flex Socket与Java通信实例说明(转) 这两天一直在flex的Socket ,现在终于懂了很多.由浅到深一步一步深入.慢慢体会实例,虽然实例都是在网上找的,但也经过了我的测试.我比较喜欢注 ...

  9. 经常出现在python中的错误和异常处理

    PS:如有需要Python学习资料的小伙伴可以加点击下方链接自行获取 http://t.cn/A6Zvjdun 使用try except处理异常 上面的代码中,被除数是0,会引发ZeroDivisio ...

  10. 谈谈MySQL的索引

    目录 索引 前言 是什么 B树 B+树 B树和B+树结构上异同 有什么用 怎么用 索引 前言 总所周知,数据库查询是数据库的最主要功能之一.我们都希望查询数据的速度能尽可能的快.而支撑这一快速的背后就 ...