Vue 里几个重要的指令

Vue 里几个重要的指令 ——资源来自黑马程序员

v-text
v-html
v-on
v-show
v-if
v-bind
v-for
v-model

——资源来自黑马程序员)

v-text

<h1 v-text="message" ></h1>
或直接 <h1{{message}></h1>对应script中
<script>el:"#app",data:{message:"hello world"}
</script>

v-html

v-html和v-text作为普通文本时效果一样但html在非文本时会出现不同如下：
<h1 v-text="message" ></h1>
<h1 v-html="message" ></h1>
v-text会把<a href="www.baidu.com">百度</a>直接输出
但v-html会输出百度的超链接格式对应script中
<script>el:"#app",data:{message:<a href="www.baidu.com">百度</a>}
</script>

v-on

v-on用于设置动态事件<input type="button"  v-on:click="change" >
<input type="button"  @click="change" >
对应script中
<script>el:"#app",methods:{change:function(){alert("!!!");}}
</script>@keyup.enter=""
enter可以换成任何一个键位代表敲击键位弹起后运行函数

v-show

v-show用于设置内容是隐藏还是现实，值为true是显示，false是隐藏可以设置一个按钮，设置v-on函数为change，点击后修改v-show的值
<input type="button" @click="change">
<img v=show="isshow" src="./img/x.jpg"> <script>el:"#app",data:{isshow:false},methods:{change:function(){this.isshow=!this.isshow}}
</script>

v-if

v-if 根据表达式真假切换元素的显示和隐藏
一般与v-show一致
v-show 是修饰样式只控制display
v-if 修改dom树
频繁操作的元素用v-show,使用较少的用v-if

v-bind

v-bind设置元素属性，绑定属性<img v-bind:src="./img/x.jpg">
或<img :src="./img/x.jpg"><img :class = "{active:isActive}">
<img :class = "isActive?'active':''">

v-for

根据数据形成列表对象
<input type="button" @click="add"><ul><li v-for="(item,index) in arr">{{item}}</li>
</ul>
<p  v-for="item in arr2">{{item.name}}
</p><script>el:"#app",data:{arr:["1","2","3"],arr2:[{name:"a"},{name:"b"}]},methods:{add:function(){this.arr2.push({name:"c"});}}
</script>

v-model

获取、设置表单元素的值<div id="app"><input type="text" v-model="message"><p>{{message}}</p>
</div><script>el:"#app",data:{message:"hello world"}
</script>
在页面上对text框的内容修改，会同步修改p标签里的内容，双向绑定

Vue 里几个重要的指令相关推荐

vue 给checkbox 赋值_浅谈vue中关于checkbox数据绑定v-model指令的个人理解
vue.js为开发者提供了很多便利的指令,其中v-model用于表单的数据绑定很常见, 下面是最常见的例子: {{msg}} js里data初始化数据 new Vue({ el: "#myA ...
Vue.js 学习笔记十一自定义指令
之前看到过v-bind,v-on等指令,Vue还可以自定义指<div id="divApp" <div v-focus></div> & ...
vue入门（一）搭建vue项目，基础显示，指令
之前接触过vue,但是一直不是十分清晰,学的云里雾里,最近打算再次系统的整理一下,重新入门.还是根据vue官方文档一步一步的来,但是是属于简化的那种,会把我的学习过程都记录下来. 下一篇:vue入门( ...
Vue学习之旅Part1：Vue的数据渲染语法和指令(插值表达式、v-cloak、v-text、v-html)
在Vue里有好几种数据渲染的方法及相关指令下面将一一介绍: 一.插值表达式插值表达式是用两个花括号{{}}包裹属性属性在Vue实例里定义: 通过Vue提供的指令即可很方便地将数据渲染到页面上 ...
vue基础--模板语法、常用指令：v-if、v-show、v-for、虚拟DOM、v-once、v-cloak、v-text、v-html、v-bind、v-on、自定义指令
一.模板语法 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 ...
Vue里标签嵌套限制问题解决------解析DOM模板时注意事项：
Vue里标签嵌套限制问题解决------解析DOM模板时注意事项: 参考文章: (1)Vue里标签嵌套限制问题解决------解析DOM模板时注意事项: (2)https://www.cnblogs. ...
vue 打包后访问接口报错404 解决方案（前提是在vue里使用了代理）
vue 打包后访问接口报错404 解决方案 (前提是在vue里使用了代理) 参考文章: (1)vue 打包后访问接口报错404 解决方案 (前提是在vue里使用了代理) (2)https://www. ...
Vue 里的$如何理解
如下代码: new Vue({el: '#app',router,store,i18n,test,render: h => h(App) })// 用的时候this.$store.dispatc ...
Vue项目实战01: vue里父传子传事件(easy)
vue中的组件通信相信小伙伴们已经达到炉火纯青的地步了提到vue里父子组件通信脑子里第一个想到的是不是使用$emit来传递. 实现肯定是能实现的下面我们一起看一下一种简单的方法父组件: 在父 ...

Vue 里几个重要的指令

Vue 里几个重要的指令 ——资源来自黑马程序员

v-text

v-html

v-on

v-show

v-if

v-bind

v-for

v-model

Vue 里几个重要的指令相关推荐

最新文章

热门文章

Vue 里 几个重要的指令

Vue 里 几个重要的指令 ——资源来自黑马程序员

v-text

v-html

v-on

v-show

v-if

v-bind

v-for

v-model

Vue 里 几个重要的指令相关推荐

最新文章

热门文章

Vue 里几个重要的指令

Vue 里几个重要的指令 ——资源来自黑马程序员

Vue 里几个重要的指令相关推荐