vue中的v-text指令之Vue知识点归纳(二)

本文中将描述：

v-text 的指令的基本使用
v-text 与差值表达式的区别

1 简述

v-text会将元素当成纯文本输出

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=divice-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>vue v-text指令</title>
</head><body><div id="app"><!-- 直接引用 --><h3 v-text="message"></h3><!-- 拼接一点数据 --><h3 v-text="message+'这里是拼接的数据'"></h3><h3>差值表达式引用 {{message}}</h3></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: "#app",data: {message: "hellow world"}})</script>
</body></html>

效果：

2 注意：

使用 {{}} 差值表达式来引用数据，数据内容只会替换{{}}内部的
使用 v-text ，对应标签内的所有的数据全部会被替换掉

vue中的v-text指令之Vue知识点归纳(二)相关推荐

vue中headers是什么_【vue】饿了么项目-header组件开发
1.数据传递的理解在App.vue中用到了header组件,首先注册组件 components: {'v-header': header } 然后才能引用 :seller="seller& ...
视频教程-在Vue中使用GraphQL实现聊天室-Vue
在Vue中使用GraphQL实现聊天室某大厂资深前端工程师,多个大型web项目经验,JS全栈工程师,擅长前端工程化建设.hybrid技术方向. 大碗 ¥39.00 立即订阅扫码下载「CSDN程序员 ...
vue中插值表达式和14个vue指令详解
在学习vue时,插值表达式和vue指令可谓是基础中的基础,这篇文章,就让你彻底了解怎么使用插值表达式和vue中所有指令的用法. 一.插值表达式:{{ }} 可以将vue中的数据填写在插值表达式中 &l ...
笔记三 vue中封装复用过滤器自定义组件 vue中component选项
题外话: npm install -g express-generator npm安装express框架封装复用 Vue中关于封装复用的内容,属于Vue中的进阶知识,在实战中对开发者的抽象和泛化能力 ...
在vue中引入css,详解在Vue中有条件地使用CSS类
详解在Vue中有条件地使用CSS类 2019-01-07 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了详解在Vue中有条件地使用CSS类,编程之家小编觉得挺不 ...
vue 中provide的用法_聊聊Vue中provide/inject的应用详解
众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数 ...
Vue（五）Vue中的网络请求（使用Vue脚手架发送Axios请求）
一.Axios 1.定义:利用ES6提供的Promise方式,把AJAX进行了封装.我们在Vue中发送网络请求,基本上就是使用Axios 需要安装第三方的Axios模块,才能使用 ...
Vue中directives用法--自定义指令控制按钮权限
1. 新建 hasPermission.js文件 const hasPermission = {install (Vue, options) {Vue.directive('has', {insert ...
Vue中过滤器和自定义指令详解
目录 1,局部过滤器 1.1定义: 1.2案例 2,全局过滤器 2.1定义: 2.2案例 3.自定义指令 3.1定义: 3.2案例 3.3自定义指令全局写法 1,局部过滤器 1.1定义: Vue.js ...

vue中的v-text指令之Vue知识点归纳(二)

1 简述

2 注意：

vue中的v-text指令之Vue知识点归纳(二)相关推荐

最新文章

热门文章