一、vue常见的指令

  1. v-once：保留第一次渲染结果
  2. v-html ：把html代码解析，只显示内容
  3. v-pre ：原样输出
  4. v-cloak ：解决文本闪烁问题
  5. v-text　：显示文本

二、v-bind指令两种写法   作用：动态绑定属性

<a v-bind:href="url">百度</a>

<a :href="url">百度</a>

1、v-bind动态绑定class(对象语法)

    <a :href="url" class="title" :class="{active:isActive,line:isLine}">百度</a>

    <a :href="url" class="title" :class="getClasses()">百度</a>

2、v-bind动态绑定class:(数组语法)

<h2 :class="[classaArray ,classaArray2]">{{message}}</h2>

<h2 :class="getClassArray()">{{message}}</h2>

*********完整代码************

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="./js/vue.js"></script>

    <style>

        .active {

            color: red;

        }

        .line {

            background: #;

        }

    </style>

</head>

<div id="app">

    <a v-bind:href="url">百度</a>

    <!-- 动态绑定class{对象语法} -->

    <a :href="url" class="title" :class="{active:isActive,line:isLine}">百度</a>

    <a :href="url" class="title" :class="getClasses()">百度</a>

    <!-- 动态绑定class[数组语法] -->

    <h2 :class="[classaArray ,classaArray2]">{{message}}</h2>

    <h2 :class="getClassArray()">{{message}}</h2>

    <h2></h2>

    <button v-on:click="getClass">按钮</button>

</div>

<body>

    <script>

        let vm = new Vue({

            el: '#app',

            data: () => ({

                message: '王者不可阻挡',

                url: 'https://www.baidu.com/',

                isActive: true,

                isLine: true,

                classaArray: 'active',

                classaArray2: 'line'

            }),

            methods: {

                getClass: function () {

                    this.isActive = !this.isActive

                },

                getClasses: function () {

                    return { active: this.isActive, line: this.isLine }

                },

                getClassArray: function () {

                    return [this.classaArray, this.classaArray2]

                }

            }

        })

    </script>

</body>

</html>

3、v-bind动态绑定style(对象语法)

<!-- <h2 :style="{ker(属性名):value(属性值)}">{{message}}</h2> -->

    <h2 :style="{color:color,fontSize:'fontSize'}">{{message}}</h2>

    <h2 :style="getStyle()">{{message}}</h2>

4、v-bind动态绑定style(数组语法)

<h2 :style="[baseStyle,baseStyle2]">{{message}}</h2>

*******完整代码*******

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="./js/vue.js"></script>

</head>

<div id="app">

    <!-- v-bind动态绑定style（对象写法） -->

    <!-- <h2 :style="{ker(属性名):value(属性值)}">{{message}}</h2> -->

    <h2 :style="{color:color,fontSize:'fontSize'}">{{message}}</h2>

    <h2 :style="getStyle()">{{message}}</h2>

    <!-- v-bind动态绑定style（数组写法） -->

    <h2 :style="[baseStyle,baseStyle2]">{{message}}</h2>

</div>

<body>

    <script>

        let vm = new Vue({

            el: '#app',

            data: () => ({

                message: '爱生活，爱自己',

                color: 'green',

                fontSize: '50px',

                baseStyle: {

                    background: 'red'

                },

                baseStyle2: {

                    color: 'pink'

                }

            }),

            methods: {

                getStyle: function () {

                    return { color: this.color, fontSize: this.fontSize }

                }

            }

        })

    </script>

</body>

</html>

VUE--插值的操作的更多相关文章

  1. vue 中 直接操作 cookie 及 如何使用工具 js-cookie

    转载:https://www.cnblogs.com/xiangsj/p/9030648.html vue 中直接操作 cookie 以下3种操作方式 set: function (name, val ...

  2. 035——VUE中表单控件处理之使用vue控制select操作文字栏目列表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Vue之cookie操作（原生）

    Vue之cookie操作(原生) 再vue组件中加入以下几个方法,然后调用即可. methods:{ //读取cookie,需要注意的是cookie是不能存中文的,如果需要存中文,解决方法是后端先进行 ...

  4. Vue2.0 【第二季】第3节 Vue.set全局操作

    目录 Vue2.0 [第二季]第3节 Vue.set全局操作 第3节:Vue.set全局操作 一.引用构造器外部数据 二.在外部改变数据的三种方法: 三.为什么要有Vue.set的存在? Vue2.0 ...

  5. vue插值 v-cloak

    vue插值 v-cloak 使用VUE时,页面刷新时会出现闪动的现象(即在插值时会显示两侧的 {}) 先定义一个VUE 通过选择器在style中定义v-cloak的display值为none 再在元素 ...

  6. Vue框架- 指令操作

    目录 一.Vue指令操作 1. 表单指令 2. 条件指令 3. 循环指令 4. 斗篷指令 5. 实例成员:delimiter分隔符(了解) 6. filter过滤器 7. computed计算属性 8 ...

  7. 使用vue实现tab操作

    在使用jQuery类库实现tab功能时,是获取鼠标在mousenter或click时的index值,然后切换到当前的标题和内容,把其他的标题和内容的状态去掉: $('.tab .title').fin ...

  8. vue项目中操作PDF文件

    以前从来没接触过前端要求显示PDF文件,一时之间有点懵逼,不知从哪下手啊... 无奈之下,去找度娘,方法还不少,iframe  embed  object这些标签就可以, 可是拿过来做个demo一试, ...

  9. Vue还有这种操作？浅析几个新手常常忽略的API

    一:实现子组件与父组件双向绑定的"sync": 一般来说,我们实现父子组件值的传递通常使用的是[props]和自定义事件[$emit].父组件通过[props]将值传给子组件,子组 ...

  10. vue 插值，v-once,v-text, v-html

    引入Vue.js ,通过script形式,vue官网语法记录 创建vue应用,数据和 DOM 已经被建立了关联,所有东西都是响应式的 1:插值 缺点:让你的网速慢,或者数据加载失败时,会在浏览器中直接 ...

随机推荐

  1. 史上最全面的SignalR系列教程-目录汇总

    1.引言 最遗憾的不是把理想丢在路上,而是理想从未上路. 每一个将想法变成现实的人,都值得称赞和学习. 致正在奔跑的您! 2.SignalR介绍 SignalR实现服务器与客户端的实时通信 ,她是一个 ...

  2. JAVASSM框架面试题

    1.SpringMVC的工作流程? 1. 用户发送请求至前端控制器DispatcherServlet 2. DispatcherServlet收到请求调用HandlerMapping处理器映射器. 3 ...

  3. PHP 错误：Warning: Cannot modify header information - headers already sent by ...

    PHP初学者容易遇到的错误:Warning: Cannot modify header information - headers already sent by ...: 通常是由不正确使用 hea ...

  4. 【学习笔记】第一章 python安全开发简介

    1.1为什么黑客喜欢用python? python为我们提供了非常完善的基础代码库,覆盖了网络.文件.GUI.数据库.文本等大量内容,被形象的称为“”内置电池“”,用python开发,许多功能不必从零 ...

  5. 在阿里云服务器CentOS7安装mysql提示“No package mysql-server available上安装mysql遇到的问题

    1:安装mysql的时候:执行以下语句出现错误 yum install mysql-server 提示错误: 原因是: CentOS7带有MariaDB而不是MySQL,MariaDB和MySQL一样 ...

  6. 一文搞懂 deconvolution、transposed convolution、sub-­pixel or fractional convolution

    目录 写在前面 什么是deconvolution convolution过程 transposed convolution过程 transposed convolution的计算 整除的情况 不整除的 ...

  7. js中的几种继承方法

    JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一. 继承:子承父业:一个原本没有某些方法或属性的对象,统一写方法,拿到了另外一个对象的属性和方法 下面是js中的几种继承方式 1.改变this ...

  8. Jmeter接口压力测试，Java.net.BindException: Address already in use: connect

    Java.net.BindException: Address already in use: connect 问题原因: 操作系统会为TCP/IP服务预留临时端口,Jmeter在跑并发测试的时候每开 ...

  9. maven仓库 - nexus配置

    搭建环境: 腾讯云服务器 CentOS 6.8.jdk7.sonatype nexus.maven.Xshell 5 版本信息: jdk : jdk-7u80-linux-x64.tar.gz nex ...

  10. Linux 笔记：核心思想、常用命令以及脚本语法

    总结于 <鸟哥的 Linux 私房菜 - 基础学习篇> ,图片也来自于此. 核心思想 目录树结构(directory tree) Linux 系统是基于目录树结构的,这是它的核心思想.目录 ...