vue.js计算属性基本用法

向右看齐 2021-10-19 02:56 312阅读 0赞

<!doctype html>
    <html>
    <head>
    <title>测试Vue.js</title>
    <meta charset = "utf-8">
    </head>
    <body>
    <div id="app">
    	{
       {name}}
    	<p v-html="content"></p>
    	<p> 计算属性:  {
       {ReversedMessage}}</p>
    	<input type="text" v-model="price"></input>
    	<p>值为watch: {
       {sum}} </p>
    	<p>值为computed: {
       {getData}} </p>
    </div>
    <script src = "vue.js"></script>
    <script>
    var vm = new Vue(
    	{
    		el:"#app",
    		data:
    		{
    			name : "xiaoming",
    			content:"<b>你好</b>",
    			price : 100,
    			sum : 0
    		},
    		
    		computed :
    		{
    			ReversedMessage : function()
    			{
    				return this.name.split('').reverse().join('')
    			},
    			getData: function(){
    				this.sum = this.price;
    				return this.sum;
    			}
    		},
    		//当变量发生变化时都会获取相应的操作使用watch,
    		//最好可以使用computed,因为计算属性有缓存,当值有变化时才去取值，这样可以直接写
    		watch:
    		{
    			price:function(newvalue)
    			{
    				this.price = newvalue;
    				this.sum = this.price;
    				console.log(this.price)
    			}
    		}
    		
    	}
    )
    </script>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，312人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue计算属性之：computed属性中的get与set用法

et：设置值时触发。 get：获取值时触发，与set是没有必然联系的。 <html> <head> <meta http-equiv="Con...

r囧r小猫/ 2024年04月18日 18:42/ 0 赞/ 65 阅读

相关 vue计算属性computed基本用法

计算属性computed案例：结果截图： ![在这里插入图片描述][20210123165928482.jpg_pic_center] `html代码如下：`

深碍√TFBOYSˉ_/ 2023年01月10日 05:04/ 0 赞/ 150 阅读

相关 git基本用法

一、git版本控制 svn、git 1.安装从官网上下载 https://git-scm.com/ 没有特殊要求的话，默认安装即可 2.配置用户信息

Myth丶恋晨/ 2022年12月02日 01:05/ 0 赞/ 218 阅读

相关 Vuejs——（3）计算属性，样式和类绑定

先上总结：（十九）标签和API总结（2） vm指new Vue获取的实例 ①当dom标签里的值和data里的值绑定后，更改data对应的值可以实时更新标签里的

偏执的太偏执、/ 2022年07月17日 03:54/ 0 赞/ 45 阅读

相关 Vuejs computed set get计算属性

直接贴代码，看注释 <template> <div id="example"> <!-- 设置计算属性的绑定字段，即reversedMessage的计算属性

柔光的暖阳◎/ 2022年06月09日 12:12/ 0 赞/ 231 阅读

相关 VueJS极简教程之五：计算属性（computed）

VueJS的`computed`关键字主要用于定义一些通过其他属性计算出来的值，以下我们来着重介绍`computed`关键字的使用方法。定义方式 computed

深碍√TFBOYSˉ_/ 2022年04月21日 14:48/ 0 赞/ 265 阅读

相关 jqury属性用法

Attribute： $(”p”).addClass(css中定义的样式类型); 给某个元素添加样式 $(”img”).attr(\{src:”test.jpg”,al

以你之姓@/ 2022年04月08日 08:19/ 0 赞/ 230 阅读

相关 Vuejs computed get set 计算属性

直接看代码吧 \`\`\` <template> <div id="example"> <!-- 设置计算属性的绑定字段，即reversedMessa

电玩女神/ 2022年02月04日 11:15/ 0 赞/ 310 阅读

相关 vue.js计算属性基本用法

<!doctype html> <html> <head> <title>测试Vue.js</title> <meta charset

向右看齐/ 2021年10月19日 02:56/ 0 赞/ 313 阅读

相关 CompletableFuture基本用法

[https://www.cnblogs.com/cjsblog/p/9267163.html][https_www.cnblogs.com_cjsblog_p_9267163

骑猪看日落/ 2021年06月11日 15:13/ 0 赞/ 711 阅读