一、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. 1.mssql和mysql sql如何调优？

    mssql是指微软的SQL Server数据库服务器. mssql常见的调优方法主要分为两类, (1)代码优化,代码优化,我搜集常用到的有以下几点: 1.避免使用select *  语句 2.避免关联 ...

  2. shell中sh, exec, source, fork, ./的区别

    shell中sh, exec, source, fork, ./的区别 1,sh sh test.sh ​ sh是通过创建子进程(subshell)去执行脚本,父进程无法使用子进程中的变量,而子进程对 ...

  3. 在命令行已经pip install flask-script，但是导包时出错

    问题:(已经安装好了flask-script,但是导入不成功) 然后在代码中导入相应的包:(报红) 后来发现是在自己创建项目的时候勾选的是创建的是在虚拟环境下的项目,所以环境有问题 所以我应该在虚拟环 ...

  4. elasticsearch Discovery 发现模块学习

    发现模块和集群的形成 目标 发现节点 Master选举 组成集群,在Master信息发生变化时及时更新. 故障检测 细分为几个子模块 Discovery发现模块 Discover是在集群Master节 ...

  5. 13 (OC)* SDWebImage

    IOS SDWebImage实现原理详解   在之前我写过SDWebImage的使用方法,主要是用与获取网络图片,没有看过的朋友可以看看. 这篇文章将主要介绍SDWebImage的实现原理,主要针对于 ...

  6. 年年有余之java求余的技巧集合

    背景 传说里玉皇大帝派龙王马上降雨到共光一带,龙王接到玉皇大帝命令,立马从海上调水,跑去共光施云布雨,但粗心又着急的龙王不小心把海里的鲸鱼随着雨水一起降落在了共光,龙王怕玉皇大帝责怪,灵机一动便声称他 ...

  7. 运用 CSS in JS 实现模块化

    一.什么是 CSS in JS 上图来源:https://2019.stateofcss.com/technologies/ CSS in JS 是2014年推出的一种设计模式,它的核心思想是把 CS ...

  8. centos7防火墙命令

    https://blog.csdn.net/achang21/article/details/52538049

  9. electron教程(一): electron的安装和项目的创建

    我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(二): http服务器, ws服务器, 进程管理 electron教程(三): 使 ...

  10. 设计模式之UML类图以及类间关系

    类图是描述系统中的类,以及各个类之间的关系的静态视图.能够让我们在正确编写代码以前对系统有一个全面的认识.类图是一种模型类型,确切的说,是一种静态模型类型.类图表示类.接口和它们之间的协作关系. 以下 ...