vue中常见的指令

1,差值表达式{{}}

1 <p >{{ msg }}</p>

2、v-cloak解决差值表达式闪烁的问题  

<p v-cloak>{{ msg }}</p>

3、v-text是没有闪烁问题的。

1 <h4 v-text="msg"></h4>//注意:v-text会覆盖元素中的原本的内容,差值表达式只会替换自己的这个占位符
3 <h4 v-text="msg">=======</h4>//等于号将会被替换掉

4、 v-html也会覆盖元素原本的内容,但是可以解析出HTMl标签。

5、 v-bind: 是Vue中提供的用于绑定属性的指令。

简写形式为 :只能实现数据的单项绑定,由M 自动绑定到 V中。无法实现数据的双向绑定。

<input type="button" value="按钮" v-bind:title="mytitle">//这里的mytitle是一个在data里面定义的一个变量

6、v-on是事件绑定机制。简写形式为@

<input type="button" value="按钮" v-on:click="show">//show是在new Vue里面的methods属性中的可用的方法,事件处理函数

7、v-model是唯一的实现数据双向绑定。

表单元素可以和用户进行交互。该指令可实现 表单元素和 Model中数据的双向绑定。但是仅限于表单元素input(radio/text/addresss/email) select checkbox textarea

8、v-if和v-show的区别

v-if每次都会重新删除或创建元素。具有较高的切换性能的消耗。

v-show每次不会重新进行Dom的删除和创建操作,只是切换了元素的display:none样式,具有较高的初始渲染消耗

9、v-for可以做一些循环操作。

1循环普通数组:要先写每一项item,再写索引i

<p v-for="(item,i) in list1">索引:{{i}}----每一项:{{item}}</p>

其中普通数组是定义在data上的list1如下

list1: [1,2,3,4,5]

2循环对象数组

<p v-for = "(item,i) in list2">ID: {{item.id}}---名字:{{item.name }}---索引:{{i}}</p>

其中,list2是定义在data上的对象数组

list2: [
    { id:1, name: ‘zs1‘},
    { id:2, name: ‘za2‘},
    { id:3, name: ‘zs3‘}
],

3循环对象

<p v-for = "(val, key, i) in user">值是:{{val}}---键是--{{key}}--索引是:{{i}}</p>
user:{
    id:1,
    name:‘托尼*屎大颗‘,
    gender: ‘男‘
}

4迭代数字

<p v-for = "count in 10 ">这是第 {{ count }} 次循环</p>

注意:在v-for循环的时候,应该尽量指定key属性,且只能使用number或者string类的,例如下面的事例中,给ID框和Name文本框写入数据之后实现页面的同步。

例子:添加Name和ID

#app部分为如下:

1,页面上的数据是由用户输入的,因此需要v-model双向数据绑定。v-model的作用是,1,将用户输入的数据同步到data中2,同步到data中的数据(使用)通过methods中的业务逻辑同步到页面上。

<div id="app">
    <div>
        <label >ID:
            <input type="text" v-model = "id">
        </label>
        <label >Name:
            <input type="text" v-model = "name">
        </label>
        <input type="button" value="添加"@click="add">
    </div>
  <p v-for = "item in list":key="item.id"><input type="checkbox">{{item.id}}---{{item.name}}</p>
</div>

vm是一个新的事例。el 是指定的要控制的区域。 data 是个对象,指定了控制的区域里面要用到的数据。methods 虽然带个s后缀,但是是个对象,可以自定义方法。 在vm实例中,如果要访问 data 上的数据,或者要访问methods中的方法,必须带上this。

var vm = new Vue({
    el:‘#app‘,
    data:{
        id:‘‘,
        name:‘‘,
        list:[
            { id:1, name:‘刘亦菲‘},
            { id:2, name:‘刘昊然‘},
            { id:3, name:‘柳岩‘},
            { id:4, name:‘刘德华‘}
        ]

    },
    methods:{
        add(){
            this.list.unshift({id:this.id,name:this.name})
        }
    }
})

原文地址:https://www.cnblogs.com/jwenming/p/12046033.html

时间: 2024-11-13 04:21:26

vue中常见的指令的相关文章

Vue中v-on的指令以及一些其他指令

1.v-on的基本使用 <div id="app"> <!-- 使用事件绑定的简写形式 --> <input type="button" value="按钮" v-on:click="btn"> </div> <script> var vm = new Vue({ el: '#app', //methods是用来专门存放vue的处理方法的 methods: { btn

Vue中的v-bind指令

普通: property="value" 此时 value为字符串 v-bind指令 v-bind:property="value" 此时 value会被解析成一个变量,若是在vue实例中没有找到,会显示找不到错误 作用: 1.用于动态绑定一个值 2.用于传入变量 注意事项: :property = "value" 由于使用多了v-bind指令的语法糖:property来组件的prop属性,在出现那个说找不到被绑定的变量时,要反应出来是vue把v

vue中v-for系统指令的使用

v-for指令可以用来遍历数组/对象 它可以根据data中数据的更新动态刷新视图 1. 遍历数组 1.1 使用方式: v-for="item in arr" item是一个参数,表示数组中的每一项,arr也是一个参数,表示你要遍历的数组 1.2 使用方式: v-for="(item, index) in arr" index表示数组项的索引 ? 2. 遍历对象 2.1 使用方式:v-for="value in obj" value 表示对象的属性

快速掌握vue中的自定义指令

自定义指令 注册全局的自定义指令 Vue.directive(), 其中,传递两个参数,第一个参数传递的是指令的名字,第二个参数是一个对象. 详细的例子 // 第一个参数是指令的名称,第二个参数是一个对象. Vue.directive('focus', { bind: function (el) { // 注意:每个函数中呢,第一个参数永远是el, 表示被绑定了指令的那个元素,这个el参数,是一个原生的js对象 el.focus() }, // 在元素刚绑定指令的时候,元素还没有放到dom中去,

ORACLE中常见SET指令

?? 1         SET TIMING ON 说明:显示SQL语句的执行时间.默认值为OFF. 在SQLPLUS中使用,时间精确到0.01秒.也就是10毫秒. 在PL/SQL DEVELOPER 中.时间精确到0.001秒: 2         SET AUTOTRACE ON 说明:设置同意对运行的SQL进行分析.默认值为OFF. SET AUTOTRACE OFF:不生成AUTOTRACE 报告.这是缺省模式 SET AUTOTRACE ON EXPLAIN:AUTOTRACE仅仅显

git中常见操作指令

从git上拉下一个项目: 1.git clone 项目链接 2. git checkout development (切换到development分支) 3.git pull origin  development(获取development上最新的代码) 4.git pull origin ******(*:分支名) 5.git checkout ******(*:分支名) 将项目推上git: 1.git status 2.git add . 3.git status 4.git commit

横冲直撞vue(第三篇):vue中template的三种写法、v-bind、v-on、更新元素的指令v-text与v-html、条件渲染指令v-if 与v-show、v-for

一.vue中template的三种写法 第一种(字符串模板写法): 直接写在vue构造器里,这种写法比较直观,适用于html代码不多的场景,但是如果模板里html代码太多,不便于维护,不建议这么写. <body> <div id="app"></div> <script src="./lib/vue.js"></script> <script type="text/javascript&qu

vue中自定义指令

在vue中自定义标签,首先要调用vue中一个directive的方法,具体方法:Vue.direction('指令名称',function(){ }); 例如我们要写一个关于颜色的指令,叫v-colorred: 1 Vue.directive('colorred',function(){ 2 3 this.el.style.color='red'; 4 }); 在html中,我直接用v-colorred指令就可以了,例如: 1 <p v-colorred>1234567890</p>

Vue.js学习笔记:在元素 和 template 中使用 v-if 指令

f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <script src="https://cdn.bootcss.com/vue/2.2.