博客列表 >0803 vue常用指令

0803 vue常用指令

小言
小言原创
2022年08月04日 15:24:07287浏览

vue挂载点,实例,数据注入,响应式

  1. 挂载实例
  2. <div class="app">
  3. <p>用户名:{{username}}</p>
  4. </div>
  5. const app = Vue.createApp({
  6. data(){
  7. return{
  8. username:'王老师',
  9. };
  10. },
  11. }).mount('.app');
  1. 数据注入
  2. console.log(app.username);
  1. 响应式
  2. app.username = '张老师';

v-text,v-html

v-text,用于将数据填充到标签中,作用于插值表达式类似,如果数据中有HTML标签会将html标签一并输出
v-html,它可以将HTML片段填充到标签中
  1. <p>用户名: <span v-text="username"></span></p>
  2. <p>用户名: <span v-html="username"></span></p>

样式绑定

v-bind 动态 数据绑定,支持行内样式 style 和类样式 class ,属于高频指令,可以使用 : 代替

  1. 动态值
  2. <p v-bind:style="{color:textColor,backgroundColor:bgc}">php</p>
  3. 行内样式对象
  4. <p v-bind:style="[base,custom]">php123</p>

class可以是字符串、对象、数组。

  1. <p :class="{active: isActive}">hello 老师123</p>
  2. <p :class="[mycolor,mybgc]">hello 老师456</p>
  1. <script>
  2. const app = Vue.createApp({
  3. data(){
  4. return{
  5. //style: 'color:blue;',
  6. textColor: 'blue',
  7. bgc:'wheat',
  8. base:{
  9. border:'1px solid',
  10. background:'#e0ff00'
  11. },
  12. custom:{
  13. color:'white',
  14. padding:'15px',
  15. },
  16. active: 'active',
  17. isActive: true,
  18. mycolor: 'active',
  19. mybgc: 'bgc'
  20. };
  21. },
  22. }).mount('.app');
  23. </script>

数据双向绑定

数据之间是相通的,当数据变化时,视图也跟随着变化

v-on高频指令 ,可以简化成@ 来表示

  1. <p>
  2. <input type="text" @input="comment = $event.target.value " :value="comment">
  3. <span>{{comment}}</span>
  4. </p>

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议