第5节模板语法-插值

1.   v-once指令  效果图:       v-once指令 阻止显示新的变量值,就是 一部手机的价格 变了, 但是官网上显示的销售价格还是旧价格, 新价格它显示不出来。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href=" "/>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- v-once指令 :当此数据重新定义时数据会变,但是元素中不会更新显示新值  -->
<div id="app" v-once>
    {{ msg }}
</div>
<script type="text/javascript">
    window.onload = function () {
        var vm = new Vue({
            el: ‘#app‘,
            data: {
                msg: ‘hello vue‘
            }
        });
        console.log(vm);
        vm.$data.msg = ‘hahahahha‘;
        console.log(vm);
    }
</script>
</body>
</html>

扩展- 框架代码的执行顺序 效果图:  优先执行关于vue实例的代码

2. v-html 指令 效果图:

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href=" "/>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- v-html指令 : 输出原始HTML代码  就是不是普通文本,想想jq中的html()方法 -->
<div id="one">
    <p>你好,我的小猫咪 : {{ rawHtml }}</p>
    <p>你好,我的小猫咪 :<span v-html="rawHtml"></span></p>
</div>
<script type="text/javascript">
    var rh = new Vue({
        el: ‘#one‘,
        data: {
            rawHtml: ‘<span style="color:red">hsq</span>‘
        }
    })
</script>
</body>
</html>

3. v-bind指令:

代码:

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href=" "/>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        #id_red{
            color: red;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="two">
    <p v-bind:id="attribute_name">猜猜我是谁</p>
</div>
<script type="text/javascript">
    var el_vbind = new Vue({
        el: ‘#two‘,
        data:{
            attribute_name: ‘id_red‘
        }
    })
</script>
</body>
</html>

4. 使用JavaScript表达式 效果图:

代码:

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href=" "/>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="js">
    {{ number + 1 + ‘数字与字符串‘ }}<br/>
    {{ yesOrNo ? ‘YES‘ : ‘NO‘ }}<br/>
    <!-- 以空内容拆分成数组, 反转数组, 以空内容将数组元素连接成一个字符串 -->
    {{ message.split(‘‘).reverse().join(‘‘) }}
</div>
<script type="text/javascript">
    var js=new Vue({
        el: ‘#js‘,
        data: {
            number: 10,
            yesOrNo: false,
            message: ‘vue‘
        }
    })
</script>

</body>
</html>

原文地址:https://www.cnblogs.com/FlyingLiao/p/11569805.html

时间: 2024-11-04 02:35:47

第5节模板语法-插值的相关文章

Vue项目,用模板语法{{}}插值渲染文本,文本不能换行的坑

<p>{{contentTitle}}</p> data() { return { contentTitle: `第一行 第二行`, } }, contentTitle这个变量赋的值是,ES6的字符模板 根据说明,在这个字符模板内换行,会直接输出换行,不需要添加什么\n,<br>这类东西. 但渲染出来的文本根本没有换行,是这样的: 第一行 第二行 (换行符显示为一个空格) 之后查了一下资料说是要用,v-html进行数据的渲染 <p v-html="con

angular2的模板语法

Angular 应用管理着用户之所见和所为,并通过 Component 类的实例(组件)和面向用户的模板来与用户交互. 从使用模型-视图-控制器 (MVC) 或模型-视图-视图模型 (MVVM) 的经验中,很多开发人员都熟悉了组件和模板这两个概念. 在 Angular 中,组件扮演着控制器或视图模型的角色,模板则扮演视图的角色. 来看看写视图的模板都需要什么.本章将覆盖模板语法中的下列基本元素 HTML 是 Angular 模板的语言.快速起步应用的模板是纯 HTML 的: <h1>Hello

Angular 2 模板语法与常用指令简介

一.模板语法简介 插值表达式 <div>Hello {{name}}</div> 等价于 <div [textContent]="interpolate(['Hello'], [name])"></div> 模板表达式 1.属性绑定 1.1输入属性的值为常量 <show-title title="Some Title"></show-title> 等价于 <show-title [titl

vue.js 学习之模板语法详解

本文和大家分享的主要是vue.js 的模板语法,希望对大家学习vue.js有所帮助,一起来看看吧. Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析. 在底层的实现上, Vue 将模板编译成虚拟 DOM 渲染函数.结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上. 如果你熟悉虚拟 D

vue 模板语法

模板语法 Vue.js使用了基于HTML的模板语法,允许开发者声明式将DOM绑定至底层Vue实例的数据.所有Vue.js的模板都是合法的HTML,所以可以被遵循规范的浏览器和HTML解析器解析. 在底层的实现上,Vue将模板编译成虚拟DOM渲染函数.结合响应系统,在应用系统改变时,Vue能够智能计算出重新渲染组件的最小代价并应用到DOM操作上. 插值 #文本 数据绑定最常见的形式就是使用"Mustache"语法(双大括号)的文本插值: {{msg}} 通过使用v-once指令,你也能执

模板语法

Vue.js使用了基于HTML的模板语法,允许开发者声明式地将DOM绑定至底层Vue实例的数据.所有Vue.js的模板都是合法的HML,所以能被遵循规范的浏览器和HTML解析器解析. 在底层的实现上,Vue将模板编译成虚拟DOM渲染函数.结合响应系统,在应用状态改变时,Vue能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上. 如果你熟悉虚拟DOM 并且偏爱JavaScript的原始力量,你也可以不用模板,直接写渲染(render)函数,使用可选的JSX语法. 插值: 文本: 数据绑定最

Vue.js模板语法

Vue.js模板语法 Vue 实例 构造器 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例来启动的: var vm = new Vue({ // 选项 }) 属性与方法 每个 Vue 实例都会代理其 data 对象里所有的属性: var data = { a: 1 } var vm = new Vue({ data: data }) vm.a === data.a // -> true // 设置属性也会影响到原始数据 vm.a = 2 data.a // ->

vue介绍——模板语法

模板语法介绍 Vue.js使用了基于HTML的模板语法,允许开发者声明式地将dom绑定至底层Vue实例的数据.所有Vue.js的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析. 在底层的实现上,Vue将模板编译成虚拟dom渲染函数.结合响应式系统,Vue能够智能的重新计算出最少需要重新渲染多少组件,并把dom操作次数减少到最少. 如果熟悉虚拟dom并且偏爱JavaScript的原始力量,也可以不用模板,直接写渲染函数,使用可选的JSX语法. 插值--文本 数据绑定最常用的就

Vue架构【基础篇-第04章】:模板语法

模板语法 Vue.js使用了基于HTML的模板语法,允许开发者声明式的将DOM绑定至底层Vue实例的数据.所有Vue.js的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析. 在底层的实现上,Vue将模板编译成虚拟DOM渲染函数,结合响应系统,Vue能够智能的计算出最少需要重新渲染多少组件,并把DOM操作次数减到最少. 一.插入值 1. 插入文本 数据绑定最常见的形式就是使用"Mustache"语法(双大括号)的文本插值: <span>Message: