一、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. LeetCode探索初级算法 - 动态规划

    LeetCode探索初级算法 - 动态规划 今天在LeetCode上做了几个简单的动态规划的题目,也算是对动态规划有个基本的了解了.现在对动态规划这个算法做一个简单的总结. 什么是动态规划 动态规划英 ...

  2. input上传按钮的优化

    在使用input标签按钮的时候,<input type="file" value="" /> 显示很难看,怎么办? 使用label <li c ...

  3. windows2008r2安装笔记

    安装win7主题 控制面板 - 程序 - 打开或关闭windows功能 - 功能 - 添加功能: 在选择功能里勾选 桌面体验(会添加必要功能),安装就行了. 1.安装好后,个性化时,发现win7主题为 ...

  4. 微软发布.Net Core 3.0 RC1，最终版本定于9月23日

    2019.9.17 微软 宣布推出.NET Core 3.0 Release Candidate 1.就像Preview 9一样,主要专注于为 .NET Core 3.0 发布最终版本 .现在变得非常 ...

  5. CODESYS添加target

    1.主界面进入Tools 2.Install,选择安装包

  6. Centos第一次使用配置IP地址

    1.vim /etc/sysconfig/network-scripts/ifcfg-eth0   修改默认配置文件 TYPE=Ethernet BOOTPROTO=static #静态 可修改为[n ...

  7. 02 jvm简介

    声明:本博客仅仅是一个初学者的学习记录.心得总结,其中肯定有许多错误,不具有参考价值,欢迎大佬指正,谢谢!想和我交流.一起学习.一起进步的朋友可以加我微信Liu__66666666 这是简单学习一遍之 ...

  8. idea使用Deployment部署项目到阿里云服务器的全过程

    一.前言 之前玩了一下 Alibaba Cloud Toolkit 一键部署插件 这里顺便再提一下idea原生的Deployment自动部署项目吧,该功能也很强大,也不需要离开idea就可以直接将项目 ...

  9. [Advanced Python] 11 - Implement a Class

    基础概念:[Python] 08 - Classes --> Objects 进阶概念:[Advanced Python] 11 - Implement a Class 参考资源:廖雪峰,面向对 ...

  10. jenkins自动化部署项目9 --定时构建

    举几个例子:每隔5分钟构建一次H/5 * * * * 每两小时构建一次H H/2 * * * 每天中午12点定时构建一次H 12 * * * 每天下午18点定时构建一次H 18 * * * 在每个小时 ...